How to dynamically set value for Kendo comboBox or Kendo dropdown List in ngFor Loop?

Question

I am passing data for comboxBox or dropdwonList in a ngFor. How can I set the value based on object in datasource. For-example I want to set ngModel as healthParameterValue.isSelected to select that value for comboBox.

All the example I have seen they are passing static value to the ngModel but I want to set value dynamically.

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

Thanks in advance.

Answer 1

I'm not sure what is defaultItem in your example, but according to the documentation, the correct way to set dynamic value for a kendo-combobox is the following:

@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" }
  ];
}

so working demo