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

而且现在检查:)谢谢