角度，ng-zorro：对象作为标签

Question

I have a nz-select described https://ng.ant.design/components/select/en#api here which allows users to select multiple members. What I want is to show a username as tag label, but have the id bound to the model.

<nz-select formControlName="member" nzMode="tags" (nzOnSearch)="searchUsers($event)">
    <nz-option *ngFor="let member of searchUsersList" [nzLabel]="member.name" [nzValue]="member._id">
    </nz-option>
</nz-select>

When the user adds a member via the dropdown, the tag will show the username, but in the model, the id gets added. When reloading this page/field, it seems that I only can add strings to the model which are also being shown as label then . I cannot add complex objects which contain the string and id and I also don't know how to insert tags otherwise.

Any hints on how to accomplish what I want? I really don't like the idea of using usernames inside the backend/db but I also don't want to see id`s inside the tags.

Answer 1

I can work.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';

@Component({
  selector: 'nz-demo-select-label-in-value',
  template: `
    <nz-select
      [formControl]="control"
      style="width: 200px;"
      nzMode="tags">
      <nz-option *ngFor="let option of optionList"
       [nzValue]="option.value" 
       [nzLabel]="option.label">
      </nz-option>
    </nz-select>
  `
})
export class NzDemoSelectLabelInValueComponent implements OnInit {

  optionList = [{ label: 'Lucy', value: 1,}, { label: 'Jack', value: 2}];

  control: FormControl;

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.control = this.fb.control([2]);
  }

}

https://stackblitz.com/edit/angular-73fp31-simfut?file=src/app/app.component.ts

Answer 2

The problem is that when u reload the page u Destroy all tags. when u load the model and the value is pased to the nz-select the options of these ids is not in your searchUsersList atribute. when u reload the page u need get the ids of your form control member and hydrate your searchUsersList with these objects. Maybe make a http request to the backend with those ids and get the options of those ids