javascript - 带有复选框的 Angular 2 反应式表单

Question

最近我一直在试图弄清楚那些反应式表单是如何工作的。基本示例（无嵌套等）是可以理解的，但是如果我有这样的带有复选框的表单结构：

  {
  "username": "",
  "damnIt": "",
  "checkboxes": [
    {
      "checked": false,
      "name": "Checked1",
      "value": 10
    },
    {
      "checked": false,
      "name": "Checked1",
      "value": 11
    },
    {
      "checked": false,
      "name": "Checked1",
      "value": 12
    }
  ]
}

我应该如何在模板上呈现它以更改“*checked”值（true | false）？

Answer 1

你可以这样做：

  <form #theForm="ngForm" (ngSubmit)="submitForm(theForm.value)">

      <div *ngFor="let cb of data.checkboxes">
        <label>
          <input type="checkbox" [name]="cb.name" [(ngModel)]="cb.checked">{{cb.value}}
        </label>
      </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

  <pre>{{data.checkboxes|json}}</pre>

请参阅 Plunkr：https ://plnkr.co/edit/MpSO21fIJq1DtJoXmE3V?p=preview