Angular 6 如何将选中的复选框传递给 ngModel

Question

我在将选中的复选框（已迭代）传递给 ngModel 时遇到问题。

    <label class="btn btn-outline-secondary" 
     *ngFor="let test of tests"  >
      <input type="checkbox">
    </label>

在 ts 中我有模型：

     testData = <any>{};

this.tests = [{
    id: 1, name: 'test1' 
  },
  {
    id: 2, name: 'test2' 
  },
  {
    id: 3, name: 'test3' 
  },  
]

我尝试使用 ngModel 和 ngModelChange，但在显示选中的复选框时仍然有问题。我怎样才能做到这一点？

Answer 1

使用[(ngModel)]="test.name"

 <label class="btn btn-outline-secondary" *ngFor="let test of tests"  >
  <input type="checkbox" [(ngModel)]="test.selected" > {{test.name}} - {{test.selected}}
</label>

Demo

Answer 2

我建议你在模型中添加一个属性并绑定到模板中。

<label class="btn btn-outline-secondary" *ngFor="let test of tests"  >
    <input type="checkbox" [(ngModel)]="test.isChecked">
</label>

this.tests = [{
    id: 1, name: 'test1', isChecked: false
  },
  {
    id: 2, name: 'test2', isChecked: true
  },
  {
    id: 3, name: 'test3', isChecked: false 
  },  
]

Angular 6 如何将选中的复选框传递给 ngModel

Angular 6 how to pass selected checkbox to ngModel

checkbox

angular2-ngmodel

ngfor

angular