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

Question

我有一个表，该表的列包含使用的每一行的复选框*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。

Answer 1

由于复选框未绑定到属性（可以重置为取消选中该复选框），因此可以使用模板引用变量（例如#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;
  });
}

有关演示，请参见此堆叠闪电战。