angular - 如何在多选中使用 [(ngModel)] 来选择存储在数据库中的选项？

Question

[(ngModel)]="parameters.account.roles"包含从数据库中获得的选定选项，但是当我打开对话框时没有选择任何选项。

所有其他字段显示正确的数据并且parameters.account.roles不为空。

HTML

<mat-form-field appearance="fill">
     <mat-label>Role</mat-label>
     <mat-select multiple [(ngModel)]="parameters.account.roles">
        <mat-option *ngFor="let role of allRoles" [value]="role">{{role.name}}</mat-option>
     </mat-select>
</mat-form-field>

TS

  constructor(
    public dialogRef: MatDialogRef<UserAccountFormComponent>,
    @Inject(MAT_DIALOG_DATA) public parameters: {mode: ActionMode, account: UserAccount},
    private roles:RolesService) {
       this.account = parameters.account;
  }

  ngOnInit(): void {
    this.roles.getAll().subscribe((response: any) => {
      this.allRoles = response._embedded.roleList as Role[];
    });
  }

Answer 1

试试这个：

在 ts 文件中：

compareFn(role1: Role, role2: Role) {
    return role1 && role2 ? role1.id === role2.id : role1 === role2;
}

和 HTML 文件：

<mat-form-field appearance="fill">
     <mat-label>Role</mat-label>
     <mat-select multiple [compareWith]="compareFn" [(ngModel)]="parameters.account.roles">
        <mat-option *ngFor="let role of allRoles" [value]="role">{{role.name}}</mat-option>
     </mat-select>
</mat-form-field>