时间戳

首页 > 解决方案 > Angular 6 kendo-dropdownlist 有条件地设置 [valueField] 和 [textField]

angular - Angular 6 kendo-dropdownlist 有条件地设置 [valueField] 和 [textField]

问题描述

我在 Angular 6 项目中有一个 kendo-dropdownlist，它需要根据条件从两个不同的数据集填充。我很难弄清楚如何根据条件设置 [valueField] 和 [textField]

   <kendo-dropdownlist id="UP_CM_IN" name="UP_CM_IN"
            style="width:90%"
            [(ngModel)]="SelectUP_CM_IN"
            [defaultItem]="defaultUP_CM_IN"
            [data]="UP_CM_IN"
            [filterable]="true"
            *ngIf="selectedCS=='CM' ? [valueField]='CD_IN': [valueField]='UP_IN'"
            *ngIf="selectedCS=='CM' ? [textField]='CD_IN': [textField]='UP_IN'"
            (valueChange)="handleUP_CM_INChange($event)"
            (filterChange)="handleUP_CM_INFilter($event)">
    </kendo-dropdownlist>

标签： angularkendo-uiconditional-statementstextfield

解决方案

我认为可能无法有条件地仅更改数据集..但是您可以做的是...使用不同的数据集创建2个下拉元素，并使用 *ngIf 指令有条件地在Dom上显示它们...

例子：

<kendo-dropdownlist *ngIf="selectedCS=='CM'" id="UP_CM_IN" name="UP_CM_IN"
            style="width:90%"
            [(ngModel)]="SelectUP_CM_IN"
            [defaultItem]="defaultUP_CM_IN"
            [data]="UP_CM_IN"
            [filterable]="true"
            [valueField]='CD_IN': 
            [textField]='UP_IN'"
            (valueChange)="handleUP_CM_INChange($event)"
            (filterChange)="handleUP_CM_INFilter($event)">
</kendo-dropdownlist>

<kendo-dropdownlist *ngIf="selectedCS!='CM'" id="UP_CM_IN" name="UP_CM_IN"
            style="width:90%"
            [(ngModel)]="SelectUP_CM_IN"
            [defaultItem]="defaultUP_CM_IN"
            [data]="UP_CM_IN"
            [valueField]='CD_IN': 
            [textField]='UP_IN'"
            [filterable]="true"
            (valueChange)="handleUP_CM_INChange($event)"
            (filterChange)="handleUP_CM_INFilter($event)">
</kendo-dropdownlist>

推荐阅读