PrimeNG复选框ngModel已更新但视图未同步问题求助

问题场景 #

使用PrimeNG复选框列表，通过ngModel绑定selectedItems数组（初始包含已选中项），调用函数向数组push元素后，控制台显示数组已更新，但视图未同步更新。

组件代码 #

selectedItems: any[] = [{ name: 'Accounting', key: 'A' }];

items: any[] = [
    { name: 'Accounting', key: 'A' },
    { name: 'Marketing', key: 'M' },
    { name: 'Production', key: 'P' },
    { name: 'Research', key: 'R' }
];

selectSomething(){
    this.selectedItems.push({ name: 'Production', key: 'P' })
}

模板代码 #

<div class="card flex justify-content-center">
    <div class="flex flex-column gap-2">
        <div *ngFor="let item of items" class="field-checkbox">
            <p-checkbox name="group" [value]="item" [(ngModel)]="selectedItems" [inputId]="item.key" ></p-checkbox>
            <label [for]="item.key">{{ item.name }}</label>
        </div>
    </div>
</div>
<button (click)="selectSomething()">Select Something</button>

问题原因 #

1. Angular变更检测机制：push属于数组的可变操作，仅修改原数组内容，数组引用地址未变，Angular无法检测到数据更新，因此不触发视图刷新。
2. 对象引用匹配：新添加的{ name: 'Production', key: 'P' }是新创建的对象，与items数组中的对应对象不是同一引用，PrimeNG复选框通过对象引用匹配选中状态，导致无法识别为已选中项。

解决方法 #

最佳方案：保持数据不可变性+使用原有对象引用 #

修改selectSomething函数，从items中获取目标对象的原有引用，并通过创建新数组触发变更检测：

selectSomething(){
    // 从items数组中获取目标对象的原有引用
    const targetItem = this.items.find(item => item.key === 'P');
    // 避免重复添加
    if (targetItem && !this.selectedItems.includes(targetItem)) {
        // 创建新数组替换原数组，触发Angular变更检测
        this.selectedItems = [...this.selectedItems, targetItem];
    }
}

备选方案：手动触发变更检测 #

若需保留push操作，可注入ChangeDetectorRef手动触发变更检测：

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

constructor(private cdr: ChangeDetectorRef) {}

selectSomething(){
    const targetItem = this.items.find(item => item.key === 'P');
    if (targetItem && !this.selectedItems.includes(targetItem)) {
        this.selectedItems.push(targetItem);
        // 手动触发变更检测，更新视图
        this.cdr.detectChanges();
    }
}

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