我正在使用Ng-Zorro的多选功能,它位于抽屉中。打开抽屉时,我为select元素提供了一个选项列表和一个已经选择的项目列表。从中选择的选项列表可以正常工作,但是不会显示已选择的项目。也可以在这里看到:StackBlitz
代码:
<nz-select [(ngModel)]="selectedAttributes"
[nzMaxTagCount]="3"
[nzMaxTagPlaceholder]="attributeTagPlaceHolder"
nzMode="multiple"
name="changeAttributes"
id ="changeAttributes"
nzPlaceHolder="Please select">
<nz-option *ngFor="let attribute of allAttributes" [nzLabel]="attribute.name" [nzValue]="attribute"></nz-option>
</nz-select>
<ng-template #attributeTagPlaceHolder let-selectedList> "and " {{ selectedList.length }} " more items" </ng-template>
其中allAttributes列表的格式如下:
allAttributes= [
{
"id": 1,
"name": "Mask"
},
{
"id": 2,
"name": "Intensive"
},
{
"id": 3,
"name": "Family"
},
{
"id": 4,
"name": "Isolation"
}
];
并且其中selectedAttributes是allAttributes列表中的一项或多项:
selectedAttributes= [{"id": 1,"name": "Mask"}];
无论我如何创建或格式化选定的属性列表(可以直接从allAttributes列表中使用),都无法看到占位符并且选择为空,此外,在选择所有选项时,nzMaxTagPlaceholder显示有一个额外的项目被选中。
谁能告诉我动态设置所选项目的方法吗?
尝试如下操作。
selectedAttributes = [this.allAttributes[0]];
自
{"id": 1,"name": "Hapnikumask"}
是一个复杂的对象,其相等性将通过引用进行检查。因此,您要定义一个新对象,使其与源对象不同。