Angular+PrimeNG中p-checkbox切换组件后无法保持选中状态

1. 修改模板中的p-checkbox绑定 #

添加[(ngModel)]绑定到节点的选中状态，同时用ngModelChange替代原onChange处理选中状态变更：

<p-checkbox
  *ngIf="i === 0"
  [binary]="true"
  class="mr-1"
  styleClass="edit-checkbox"
  [disabled]="!canEdit"
  [(ngModel)]="isNodeSelected(rowNode.node)"
  (ngModelChange)="onCheckboxToggle($event, rowNode.node)"
  (click)="$event.stopPropagation()"
></p-checkbox>

2. 新增状态判断方法 #

在组件类中添加方法，判断当前节点是否存在于选中数组，作为checkbox的选中状态依据：

isNodeSelected(node: any): boolean {
  return this.selectDeleteTaskNode.includes(node);
}

3. 替换选择事件处理逻辑 #

删除原onCheckboxChange方法，改用onCheckboxToggle同步选中数组：

onCheckboxToggle(isChecked: boolean, node: any) {
  if (isChecked) {
    // 避免重复添加节点
    if (!this.selectDeleteTaskNode.includes(node)) {
      this.selectDeleteTaskNode.push(node);
    }
  } else {
    const index = this.selectDeleteTaskNode.indexOf(node);
    if (index > -1) {
      this.selectDeleteTaskNode.splice(index, 1);
    }
  }
}

4. 可选：手动触发变更检测（若模态框返回后视图未更新） #

如果模态框关闭后checkbox状态仍未同步，可在模态框关闭回调中手动触发变更检测：
首先注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

然后在模态框关闭方法中调用：

onModalClose() {
  this.cdr.detectChanges();
}

修改完成后，checkbox的选中状态会完全依赖selectDeleteTaskNode数组内容，模态框返回后只要数组中存在对应节点，checkbox就会自动显示为选中状态。

内容的提问来源于stack exchange，提问作者Steff