如何预选PrimeNG Checkbox项？默认选中值加载不生效问题排查

根本原因 #

PrimeNG 的 p-checkbox 组件在绑定数组做多选时，默认使用严格引用相等（===）逻辑判断选项是否处于选中状态：

• 你在TS类中初始化rp数组时写入的权限对象，是代码里手动声明的独立对象实例
• 模板中*ngFor遍历渲染的permission对象，是从NgRx Store读取的另一批独立对象实例
• 即便两个对象的id、name属性值完全一致，因为二者在内存中的引用地址不同，组件会判定为不匹配，对应复选框就不会默认选中。

修复方案 #

二选一即可：

• 方案1（推荐，改动最小）：给复选框加dataKey属性，指定用唯一标识字段做匹配
  不需要保证对象引用一致，组件会自动对比你指定的字段值，只要值相同就判定为选中，只需要修改模板中p-checkbox标签：

  <p-checkbox 
    [value]="permission" 
    [(ngModel)]="rp" 
    dataKey="id"
    class="mr-small">
  </p-checkbox>
  

  这里dataKey="id"就是告诉组件，用Permission对象的id字段作为选中匹配的依据。

• 方案2：从Store返回的权限列表中筛选已选项赋值，保证引用一致
  如果你不想使用dataKey属性，可以等Store的权限列表加载完成后，直接从列表中取出对应权限对象赋值给rp，保证选中值和渲染选项是同一个对象引用：

  // 组件初始化逻辑中添加订阅
  ngOnInit() {
    this.permissions$.subscribe(permissionList => {
      // 从Store返回的权限列表中匹配目标id的权限，替换手动声明的对象
      this.rp = permissionList.filter(p => p.id === 'a45d7806-fbf8-4df7-8248-6f636288ff23');
    })
  }
  

  注意这个方案必须等permissions$流返回数据之后再执行赋值逻辑，否则会拿不到完整权限列表。

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