Default Selected Values Ng-Zorro

Question

I am working with information related to users (create, delete and edit), for that I am using the same reactive formGroup. One of the current functionalities are related to edit user's information, once the user click on edit, a Modal appear with all the information of this specific user, except for role-related values, which are a list.I don't know why the user isn't selecting the values that the user brings by default, is to say the options display all the options related to roles, but not those associated with this specific user; in this case select ng-fox is being used to perform this process. If anyone could help me understand what the mistake is in my code, I'd really appreciate it. Thanks a lot.

This is my code

<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 Code: I send the entire user information, and have to do a search to match roleUser_id to role_id because are "different" but is working fine this part.

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());

  }

This is an example of information that I obtain when I click on edit some user:

Answer 1

Since you assigning Object to nzValue.We need to use compareWith property on nz-select component to determine equality between the form value object.

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);