取消选中所有使用 *ngFor 创建的复选框

我有一个表，其中有一列，其中每行包含一个复选框，使用*ngFor。单击按钮后，我想取消选中所有复选框。我尝试使用[(ngModel)]="boxChecked"对于每个复选框，并在我的按钮单击调用的方法中将该值设置为 false，但这会导致每当我仅检查其中一个复选框时都会检查每个复选框。这确实会在单击按钮时取消选中所有复选框，但我仍然需要能够单独选中这些复选框。

<ng-template pTemplate="body" let-sub let-expanded="expanded" let-columns="columns">
      <tr [pSelectableRow]="subcontract">
        <td *ngFor="let col of columns" [ngSwitch]="true" style="text-align: center">
          <div *ngSwitchCase="col.export" ><input type="checkbox" (change)="checked($event, sub)" [(ngModel)]="boxChecked"></div>
        </td>
      </tr>
</ng-template>
<button type="button"(click)="reset(table)"></button>

ts:

//I send the ID of the table to this method.
reset(table) {
    table.reset();
    this.boxChecked = false;
}

到目前为止，在我的研究中，我还没有看到有get(index i)（获取索引参数的单行）我的表上的某种方法。然后我可以轻松地循环遍历我的表并将每个迭代（行）的复选框设置为 false。

由于复选框未绑定到属性（可以重置以取消选中该框），因此您可以使用模板引用变量（例如#checkboxes):

<input #checkboxes type="checkbox" ...>
...
<button type="button" (click)="uncheckAll()"></button>

检索复选框ViewChildren在代码中并取消选中每一项：

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>;

uncheckAll() {
  this.checkboxes.forEach((element) => {
    element.nativeElement.checked = false;
  });
}

See 这次堆栈闪电战 https://stackblitz.com/edit/angular-g99rg5进行演示。