Primeng，用pButton动态取消选中p-checkbox

Question

我最初发现了这个问题，这与我的情况非常相似:

如何手动取消选中/选中primeng复选框

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

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

基本上，我循环遍历可以是任意长度的数据，并将其显示在一个表中。

其中一列只有一个带有(onChange)的p-复选框，当选中或未选中时，它会传递一些参数让我在数组中跟踪。

我试图取消所有的p复选框与一个按钮点击。

我发现了另一个问题/解决方案，提到使用@ViewChildren, ElementRef, QueryList，但它有一个问题，试图找出"nativeElement.checked"。

和我发现的其他问题/解决方案涉及事先知道复选框的长度，并通过数组使用*ngFor来显示正确的复选框数量。我试着在我的设置中使用类似的逻辑，但也不能让它工作。

Answer 1

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

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

Answer 2

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

在按钮(click)事件处理程序中，数组引用需要更改为一个新的空数组，因为如果对象引用相同(即pop()或push()之后)，组件更改检测将不会被触发。

这是一个基于你的StackBlitz例子的解决方案。

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