如何在 ngFor 循环中动态设置 Kendo 组合框或 Kendo 下拉列表的值？答案

【问题标题】：How to dynamically set value for Kendo comboBox or Kendo dropdown List in ngFor Loop?如何在 ngFor 循环中动态设置 Kendo 组合框或 Kendo 下拉列表的值？
【发布时间】：2021-04-14 22:27:52
【问题描述】：

我在 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>

提前致谢。

【问题讨论】：

标签： angular kendo-ui kendo-dropdown kendo-combobox

【解决方案1】：

我不确定您的示例中的 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

【讨论】：