angular, ng-zorro: 对象作为标签
angular, ng-zorro: object as tag
我有一个 nz-select 描述 https://ng.ant.design/components/select/en#api 这里允许用户 select 多个成员。
我想要的是将用户名显示为标签,但将 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。
重新加载此 page/field 时,似乎我只能向模型添加字符串,这些字符串也显示为标签 then 。我无法添加包含字符串和 ID 的复杂对象,否则我也不知道如何插入标签。
关于如何完成我想要的任何提示?
我真的不喜欢在 backend/db 中使用用户名的想法,但我也不想在标签中看到 id。
问题是,当您重新加载页面时,您会销毁所有标签。当您加载模型并将值传递给 nz-select 时,这些 ID 的选项不在您的 searchUsersList
属性中。当您重新加载页面时,您需要获取表单控件的 ID member
并使用这些对象来补充您的 searchUsersList。也许使用这些 ID 向后端发出 http 请求并获取这些 ID 的选项
我可以工作。
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
我有一个 nz-select 描述 https://ng.ant.design/components/select/en#api 这里允许用户 select 多个成员。 我想要的是将用户名显示为标签,但将 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。 重新加载此 page/field 时,似乎我只能向模型添加字符串,这些字符串也显示为标签 then 。我无法添加包含字符串和 ID 的复杂对象,否则我也不知道如何插入标签。
关于如何完成我想要的任何提示? 我真的不喜欢在 backend/db 中使用用户名的想法,但我也不想在标签中看到 id。
问题是,当您重新加载页面时,您会销毁所有标签。当您加载模型并将值传递给 nz-select 时,这些 ID 的选项不在您的 searchUsersList
属性中。当您重新加载页面时,您需要获取表单控件的 ID member
并使用这些对象来补充您的 searchUsersList。也许使用这些 ID 向后端发出 http 请求并获取这些 ID 的选项
我可以工作。
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