如何在 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);
}

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

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

我可以通过这种方式得到我想要的东西。

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

How to get checkbox values in ngFor ? In Angular 2+?

checkbox

angular-ngmodel

ngfor

angular