Ng-Zorro 选择不使用 NgModel 显示所选项目答案

【问题标题】：Ng-Zorro select not showing selected items with NgModelNg-Zorro 选择不使用 NgModel 显示所选项目
【发布时间】：2020-03-25 09:29:50
【问题描述】：

我正在使用 Ng-Zorro 的多重选择，它位于抽屉中。打开抽屉时，我给选择元素一个选项列表和一个已经选择的项目列表。可供选择的选项列表工作正常，但已选择的项目不显示。这也可以在这里看到：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显示有一个额外的项目采摘。

谁能告诉我动态设置所选项目的方法？

【问题讨论】：

您的 stackblitz 应用程序不工作。如果你能分享一个可编辑的就更好了。
修复了 stackblitz 链接。 :)
查看我的答案应用于您的example。

标签： html json angular multi-select ng-zorro-antd

【解决方案1】：

试试下面的。

selectedAttributes = [this.allAttributes[0]];

自从

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

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

【讨论】：

非常感谢！这么小的事情，但我没有考虑过，并且一直在努力解决这个问题。