Angular2 - 带有多个复选框的 NgFor

Question

我正在尝试创建一个 table，它有多个不同状态的复选框（有些是真的，有些是假的）。

在这个 table 中，我有 'Save' 按钮来获取所有元素及其状态。

代码如下：

<form #form="ngForm" (ngSubmit)="save(form)">
  <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger"
         class="table table-hover table-bordered table-striped">
    <thead>
      <tr>
        <th>{{'name-placeholder' | translate}}</th>
        <th>{{'action' | translate}}</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let card of cardsDashboard;let i=index">
        <td>{{card.text}}</td>
        <td>
          <div class="form-check">
            <label>
              <input type="checkbox" name="checkDashboard" [(ngModel)]="card[i]"
                     (ngModelChange)="card[i].activate==true?'true':'false'" [checked]="card.activate">
              <span class="label-text"></span>
            </label>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="btn-toolbar pull-right ">
    <div class="btn-group">
      <button class="btn btn-primary">{{'save' | translate}}</button>
    </div>
  </div>
</form>

第一个问题：'Save' 按钮不更新元素的状态。

第二个问题：复选框不显示默认状态。复选框为空。

所以问题是：我如何使用复选框执行 ngfor 并显示状态并更新它？

----更新：数组-----

0:
activate: true
cardType: 1
id: 1
text: "Contadores"
__proto__: Object
1: {id: 2, text: "Alarmas", cardType: 2, activate: false}
2: {id: 3, text: "Consumo día anterior", cardType: 3, activate: false}
3: {id: 4, text: "Consumo del mes anterior", cardType: 4, activate: false}
4: {id: 5, text: "Elementos instalados la ultima semana", cardType: 5, activate: false}
5: {id: 6, text: "Elementos que han comunicado hoy", cardType: 6, activate: false}

Answer 1

更新我觉得有点傻::glups::

[(ngModel)]="card[i].activate" //<--WRONG

[(ngModel)]="card.activate" //<--OK

忘记 (ngModelChange) 和 [checked]。

看问题，你还真是没啥好说的

通常，我们可以做两件事：

数组中的值，例如值=["uno","tres"] 或值=[true,false,true,false] "checked options"=["uno","dos","tres","cuatro"]

列表

所以，在一个数组中我们可以有

this.options.forEach((x,index)=>{
   this.card[index].activate=value[index]
   //or 
   //   this.card[index].activate=value.indexOf(x)>=0

})

Angular2 - 带有多个复选框的 NgFor

Angular2 - NgFor with multiple checkbox

angular

checkbox

ngfor