时间戳

首页 > 解决方案 > PrimeNG 基于对象数组的预选复选框

angular - PrimeNG 基于对象数组的预选复选框

问题描述

我有复选框矩阵，它基于数组呈现行，基于数组呈现Permissions列Clients。由于数据库中的映射表作为第三个数组对象出现，因此我将其推入BehaviorSubject<PermissionClient>并为每个对象绑定它，checkbox因此ngModel它将预先检查它们。对于value复选框，我绑定了一个自定义对象

<ng-template pTemplate="body" let-permission>
      <tr>
        <td>
          {{ permission.permissionName }}
        </td>
        <td *ngFor="let client of SelectedClients" class="align-center">
          <p-checkbox [value]="{ clientId: client.clientId, permissionId: permission.permissionId }" [(ngModel)]="SelectedRows" (onChange)="onCheckboxChange($event, permission.permissionId, client.clientId)"></p-checkbox>
        </td>
      </tr>
    </ng-template>

所以最终它会映射两者Id并预先检查它们，但它不起作用。我怎样才能做到这一点？

权限客户端接口

export interface PermissionClients {
  clientId: string;
  permissionId: string;
}

以及带有相关 get/set 的 BehaviorSubject

private selectedData: BehaviorSubject<PermissionClients[]> = new BehaviorSubject([]);
get SelectedRows(): any[] {
  return this.selectedData.getValue();
}

set SelectedRows(val) {
  this.selectedData.next(val);
}

当我console.log检查复选框后SelectedRows，数组中正好有 2 个相同的对象，一个来自 db，1 个在检查后。

标签： angularprimeng

解决方案

反正我发现了问题。发布如果有人有同样的问题。问题是因为它们是完全相同的对象，所以它们的引用不是（我傻了）。通过为我的目的创建扩展CheckboxComponent和覆盖isChecked()方法来修复它。现在一切正常。

推荐阅读