默认选择值 Ng-Zorro

Question

我正在处理与用户相关的信息（创建、删除和编辑），因为我正在使用相同的反应式 formGroup。当前的功能之一与编辑用户信息有关，一旦用户单击编辑，就会出现一个模态框，其中包含该特定用户的所有信息，除了与角色相关的值，这是 list.I 不知道为什么用户不 selecting 默认用户带来的值，是说选项显示所有与角色相关的选项，但不显示与该特定用户相关的选项；在这种情况下 select ng-fox 被用来执行这个过程。如果有人能帮助我理解我的代码中的错误是什么，我将不胜感激。非常感谢。

这是我的代码

<nz-select nzMode="multiple" nzPlaceHolder="Inserted are removed" formControlName="role">
<nz-option *ngFor="let roles of this.userMngmtService.getListRoles()" [nzLabel]="roles.name"
 [nzValue]="roles"></nz-option>

Ts 代码：我发送了整个用户信息，并且必须进行搜索以将 roleUser_id 与 role_id 匹配，因为它们“不同”但是这部分工作正常。

editUser(user) {
    this.isVisible = true;
    this.tempRoles = [];
    for (let i = 0; i < user.listUserRoles.length; i++) {
      this.tempRoles.push(user.listUserRoles[i].aptRoleEntity);
    }
    console.log('userToEdit', user);
    console.log('userRName', this.tempRoles);
    // Manage the status (Edit) of the modal
    this.userEditEmailEnable = false;
    this.userEdit = true;
    this.idUserEdit = user.user_id;
    this.editForm.patchValue({
      name: user.name,
      email: user.email,
      password: user.password,
      role: this.tempRoles,
    });
    // <label *ngFor="let role of user.listUserRoles"> {{role.aptRoleEntity.name}} &nbsp;</label>
    console.log('userToEdiform', this.editForm.getRawValue());
    console.log('Available Roles', this.userMngmtService.getListRoles());

  }

这是我点击编辑某些用户时获得的信息示例：

Answer 1

由于你将对象赋值给nzValue.We需要在nz-select组件上使用compareWith属性来判断表单值对象是否相等

component.html

<nz-select [compareWith]="compareFn" nzMode="multiple" nzPlaceHolder="Inserted are removed" formControlName="role">
<nz-option *ngFor="let roles of this.userMngmtService.getListRoles()" [nzLabel]="roles.name"
 [nzValue]="roles"></nz-option>

component.ts

compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.role_id === o2.role_id : o1 === o2);

Answer 2

就我而言，这就是我解决问题的方法。

export class Role {
    id: number;
    name: string;
    guard_name: string;
}


compareFn = (o1: any, o2: any) => (o1 && o2 ? o1.name === o2 : o1 === o2);

默认选择值 Ng-Zorro

Default Selected Values Ng-Zorro

angular

select

default-value

ng-zorro-antd