Primeng，使用按钮动态取消选中复选框

Question

我最初发现这个问题，和我的情况非常相似：

how to uncheck/check a primeng checkbox manually

这是一个 StackBlitz，它显示了我的问题：

https://stackblitz.com/edit/angular-primeng-p-checkbox-issue-6xjv8b?file=app/app.component.ts

基本上，我正在遍历任意长度的数据并将其显示在 table。

其中一列只有一个带有（on Change）的p-Checkbox，当检查和未选中时，它会传递一些参数，以便我跟踪数组中。

然后我尝试通过单击按钮取消选中所有 p 复选框。

我发现另一个 question/solution 提到了使用 @ViewChildren、ElementRef、QueryList，但在试图弄清楚“nativeElement.checked”是什么时遇到了问题。

和其他 questions/solutions 我发现涉及事先知道复选框的长度，并通过数组使用 *ngFor 来显示正确数量的复选框。我尝试在我的设置中使用类似的逻辑，但也无法正常工作。

Answer 1

为什么不在模板中使用 [(ngModel)]="arrayOfChecked"？

并且在按钮 (click) 事件处理程序中，数组引用需要更改为新的空数组，因为如果对象引用相同（即在 [=12 之后），则不会触发组件更改检测=] 或 push()).

这是一个基于您的 StackBlitz 示例的解决方案。

https://stackblitz.com/edit/angular-primeng-p-checkbox-issue-6euntp?file=app/app.component.ts

Answer 2

您可以简单地控制模型中的复选框

  tableData: { id: number; name: string; isChecked?: boolean }[] = [
    { id: 1, name: 'first' },
    { id: 2, name: 'second' },
    { id: 3, name: 'third' },
  ];

然后将 ngModel 添加到 html

<tr>
  <td>{{ tdata.id }}</td>
  <td>{{ tdata.name }}</td>
  <td colspan="2">
    <p-checkbox
      #checkboxes
      [(ngModel)]="tdata.isChecked"
      binary="true"
      inputId="binary"
      (onChange)="changeCheckmark($event, tdata.id, tdata.name)"
    ></p-checkbox>
  </td>
</tr>

并重置状态

  clickButton() {
    this.tableData.filter(z => z).forEach((x) => (x.isChecked = false));
  }

Primeng，使用按钮动态取消选中复选框

Primeng, dynamically uncheck p-checkbox with pButton

checkbox

primeng

angular