Angular 2 - 處理多個複選框選中狀態

Question

我正在創建一個註冊表單，並且必須處理通過* ngFor結構指令生成的多個複選框。

模板：

<div class="form-group"> 
     <label class="col-lg-3 control-label">Response Type</label> 
     <div class="col-lg-7"> 
      <div class="checkbox" *ngFor="let type of client.responseTypes; let i = index"> 
      <label> 
       <input type="checkbox" name="responseTypes" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}} 
      </label> 
      </div> 
     </div> 
     </div> 

TS模型對象：

client.responseTypes = [ 
{ value: 'type1', checked: false}, 
      { value: 'type2', checked: true }, 
      { value: 'type3', checked: true } 
]; 

幕後的實際值選中還是未選中被正確地存儲。但是，複選框不顯示正確的值。

• 如果三者之一objects.checked ==假的，所有的複選框會顯示未選中
• 只有這三個objects.checked == true，所有三會的形式進行檢查。

我試圖與輸入元素上[value]="client.responseTypes[i].checked"和[checked]="client.responseTypes[i].checked"擺弄，但都沒有成功。

任何指向正確方向的指針都受到大量讚賞。

的問候，克里斯

Answer 1

好吧船尾呃試圖圍繞我的頭爲什麼我的本地應用程序沒有顯示我想要的結果，我開始複製和粘貼我的表單組出來的<form></form>元素。

Ta-daa，它現在的作品。

供參考：放置* ng對於<form></form>元素內的複選框會導致不需要的行爲。

Answer 2

語法是好的，好了，你也能做到

<input type="checkbox" name="responseTypes" [(ngModel)]="type.checked"> 

問題是在其他地方（當你定義的客戶 - 我想你寫一些這樣的。 client.responseTypes = ...-），你可以寫

{{client |json }} 

檢查它

Answer 3

在角與名稱每個模型綁定，意味着你需要給唯一的名稱給每個窗體elements`

例如：

<div class="form-group"><label class="col-lg-3 control-label">Response Type</label> 
    <div class="col-lg-7"> 
     <div class="checkbox" *ngFor="let type of client.responseTypes; let i = index"> 
     <label> 
      <input type="checkbox" name="type.id" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}} 
     </label> 
     </div> 
    </div> 
    </div> 

對象：

client.responseTypes = [{id: '1', value: 'type1', checked: false}, 
     {id: '2', value: 'type2', checked: true }, 
     {id: '3', value: 'type3', checked: true }]; 

而且現在檢查:)謝謝