Question

我正在使用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会显示还有一个额外项采摘。

有人可以告诉我动态设置所选项目的方法吗？

Answer 1

尝试如下所示。

selectedAttributes = [this.allAttributes[0]];

自

{"id": 1,"name": "Hapnikumask"}

是一个复杂的对象，其相等性将通过引用进行检查。因此，您要定义一个选定的新对象，它将与源对象不同。

Ng-Zorro选择不显示带有NgModel的选定项目

1 个答案: