使用* ngFor在Angular 2中不應用檢查時的複選框

Question

我有一個使用*ngFor構建的CheckBox的動態列表。無論何時手動選中框，模型都會更新，但如果模型預設爲具有複選框，則不會在裝入時檢查框。

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

它應該工作