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

【问题标题】：angular, ng-zorro: object as tag角度，ng-zorro：对象作为标签
【发布时间】：2019-09-14 13:32:41
【问题描述】：

我有一个 nz-select 描述 https://ng.ant.design/components/select/en#api 这里允许用户选择多个成员。我想要的是将用户名显示为标签标签，但将 id 绑定到模型。

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

当用户通过下拉列表添加成员时，标签会显示用户名，但在模型中，会添加 id。重新加载此页面/字段时，似乎我只能将字符串添加到模型中，这些字符串也显示为 label then 。我无法添加包含字符串和 id 的复杂对象，而且我也不知道如何插入标签。

关于如何完成我想要的任何提示？我真的不喜欢在后端/数据库中使用用户名的想法，但我也不想在标签中看到 id。

【问题讨论】：

如果我错了，请纠正我。当您在标签中选择一个或多个用户时，您会看到：(username1)、(username2)、(username3)。当你刷新页面并加载模型时。你看到（id1）（id2）（id3）。你希望当用户重新加载页面时再次看到 (username1), (username2), (username3) ？
完全正确！模型只保存 id ......当用户添加一些东西时，id 被添加（值）但标签不同。似乎没有选择以编程方式触发它。

标签： angular ng-zorro-antd

【解决方案1】：

我可以工作。

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

【讨论】：

它工作得很好！它需要一个绑定。不幸的是，它不能以这种方式与 Formgroup 一起使用，而只能与普通的 formControl 一起使用

【解决方案2】：

问题是当你重新加载页面时你会销毁所有标签。当您加载模型并将值传递给 nz-select 时，这些 id 的选项不在您的 searchUsersList 属性中。当您重新加载页面时，您需要获取表单控件member 的 id，并使用这些对象来补充您的 searchUsersList。也许使用这些 id 向后端发出 http 请求并获取这些 id 的选项

【讨论】：