如何在ngFor循环中动态设置Kendo comboBox或Kendo下拉列表的值？

问题描述

我在 ngFor 中为 comBoxBox 或 dropdwonList 传递数据。如何根据数据源中的对象设置值。例如，我想将 ngModel 设置为 healthParameterValue.isSelected 来为组合框选择该值。

我看到的所有示例都将静态值传递给 ngModel，但我想动态设置值。

<tbody *ngFor="let healthParameters of healthParameterType.healthParameters; let i = index">
    <tr>
       <td>{{healthParameters.healthParameterSetting}}</td>
      <td width="30%">
        <div class="formCheckGroup pab-2" *ngIf="healthParameters.isMultiSelectEnabled == false" >
             <kendo-comboBox 
               [data]="healthParameters.healthParameterValues"
               [textField]="'name'"
               [valueField]="'id'"
               [(ngModel)]="defaultItem[healthParameterValue.isSelected]"
               name="HealthParameterValue 
               (valueChange)="valueChange($event,healthParameterType.id,healthParameters.id)">
             </kendo-comboBox>
        </div>
      </td>
  </tr>                           

提前致谢。

解决方法

我不确定您的示例中的 defaultItem 是什么，但根据 documentation，为 kendo-combobox 设置动态值的正确方法如下：

@Component({
  selector: "my-app",template: `
    <div *ngFor="let item of items">
      {{ item.name }}
      <kendo-combobox
        [data]="listItems"
        [(ngModel)]="item['selectedValue']"
      ></kendo-combobox>
    </div>
  `
})
export class AppComponent {
  public listItems: Array<string> = ["Small","Medium","Large"];
  items = [
    { name: "a",selectedValue: "Medium" },{ name: "b",selectedValue: "Large" }
  ];
}

如此有效demo