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

【问题标题】：How to use [(ngModel)] in a multiple select to select the options stored in the database?如何在多选中使用 [(ngModel)] 来选择存储在数据库中的选项？
【发布时间】：2022-01-06 01:05:01
【问题描述】：

[(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>

  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[];
    });
  }

【问题讨论】：

parameters.account.roles 和 allRoles 中得到了什么数据？
parameters.account.roles 是已应用于用户的对象角色列表。 [{id：'ROLE202111001'，名称：'ROLE_ADMIN'}]。并且所有角色都是一样的，只是角色表中所有注册角色的列表。 @jayrag pareek
两个数组对象都使用相同的模型角色？
是的，UserAccount 有一个名为角色的属性：角色 []，当我获取所有角色时，我将其用作角色 []。 this.allRoles = response._embedded.roleList as Role[]。 this.allRoles 是 Role[] 类型。

标签： angular angular-material mat-select

【解决方案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>

【讨论】：