angular - 如何在 ngFor 中获取复选框值？在 Angular 2+ 中？

Question

嘿，我需要通过 ngFor 中的复选框检查来收集选定的值。下面是代码。

 <tr *ngFor="let item of items; let index = index;">
    <td>{{item.bed}}</td>
    <td>{{item.size}}</td>
    <td>{{item.name}}</td>
    <td>
      <input type="checkbox"
             name="domain-{{item.bed}}"
             [(ngModel)]="items[index].id"
      >
    </td>
  </tr>
<button (click)="OnSelect()">Select</button>

在组件中，我正在尝试这样访问。

component.ts
items = [];
ngOnInIt() {
  this.items = somepromise.then((items) => this.items );
}
OnSelect() {
  console.log(this.items);
}

在选择时，我看到打印的项目的所有值而不是选中的复选框值。有什么想法吗 ？

Answer 1

 <td>
    <input type="checkbox"
       name="item-{{item.bed}}"
       #myItem
      (change)="OnCheckboxSelect(item.id, $event)"
     >
 </td>

在组件中:

@ViewChildren('myItem') item;
selectedIds = [];

  OnCheckboxSelect(id, event) {
    if (event.target.checked === true) {
      this.selectedIds.push({id: id, checked: event.target.checked});
      console.log('Selected Ids ', this.selectedIds);
    }
    if (event.target.checked === false) {
      this.selectedIds = this.selectedIds.filter((item) => item.id !== id);
    }
  }

我能够通过这种方式得到我想要的东西。