在 Angular 2 中使用 *ngFor 时复选框不应用负载检查

Question

我有一个使用 *ngFor 构建的动态复选框列表。每当我手动选中这些框时，模型都会更新得很好，但如果模型预设有一个选中的框，则加载时不会选中该框。

<form action="demo_form.asp" method="get">
  <div *ngFor="let d of data; let in=index; trackBy:trackByIndex">
    <input type="checkbox" 
           name="value" 
           [(ngModel)]="data[in].value"
           [(checked)]="data[in].value" 
           (change)="checkChanged($event)"/>
    {{d.text}}
  </div>      
</form>

我了解到在 ngFor 中使用基元时需要我们 trackBy 所以这是我的 trackByIndex:

public trackByIndex(index: number, data: TextValuePair): any {
   return index;
}

这是数据：

public data = [{ text: "Human", value: true }, { text: "Dog", value: false }]

如果列表中的对象 value 设置为 "true"

，我需要在加载时选中复选框

Answer 1

找到问题了。它在 <form> 中越来越混乱。删除 <form> ，您可以将代码简化为。

  <div *ngFor="let d of data">
    <input type="checkbox" 
           name="data" 
           value="{{d.text}}"
           [(ngModel)]="d.value"
           (change)="checkChanged($event)"/>
    {{d.text}}
  </div>

它应该有效

在 Angular 2 中使用 *ngFor 时复选框不应用负载检查

Checkbox not applying check on load when using *ngFor in Angular 2

angular

data-binding

primitive

ngfor