如何预选 PrimeNG Checkbox 项目？

Question

我无法获得已经选择的项目。 在 rp 中的这段代码中，它是一个 Permission 类型的数组，其中有一个元素，所以基本上当我加载这个 div 时应该选择该值。 会出现什么错误？

这是我的 HTML：-

<div class="gapRowSmall displayFlex flexColumn mb-small" *ngIf="(permissions$ | async)! as permissions">
    <div *ngFor="let permission of permissions" class="p-field-checkbox">
        <p-checkbox [value]="permission" [(ngModel)]="rp" class=" mr-small"></p-checkbox>
        <label>{{permission.name}}</label>
    </div>
    <div class="displayFlex flexJustifyEnd">
        <p-button type="submit" label="Save" styleClass="primary" (onClick)="savePermissions()"
            [appSubmitIndicator]="(isSubmitInProgress$ | async)!"></p-button>
    </div>
</div>

这是我的 ts 文件：-

permissions$ = this.store.select(permissionSelector)
    .pipe(takeUntil(this.permissionManagementSubject));

rp: Permission[] = [{ name: 'Create New Transitions', id: 'a45d7806-fbf8-4df7-8248-6f636288ff23' },];

Answer 1

rp数组中的项目必须与 Observable 权限数组中的项目之一完全匹配。 如果不是对象中的所有字段都匹配，则不会选择它。

因此，如果权限将像这样在构造函数中加载：

  constructor() {
    this.permissions$ = of([
      {name: "aaaaa", id: '123456-789012'},
      {name: "bbbbb", id: '223456-789012'},
      {name: "ccccc", id: '323456-789012'}
    ])
  }

并且在 rp 中选择的权限将是：

  rp: Permission[] = [
    { name: 'aaaaa', id: '123456-789012' },
    { name: 'bbbbb', id: '223456-' }, // This one is incomplete, thus no match
  ];

然后第二个，虽然部分匹配，但不会被选中。

我在 stackblitz 中有一个工作示例。 https://stackblitz.com/edit/primeng-checkbox-demo-9rhzru?file=src/app/app.component.ts