2

引き出しにある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 リスト内の 1 つ以上の項目です。

selectedAttributes= [{"id": 1,"name": "Mask"}];

選択した属性リストをどのように作成またはフォーマットしても (allAttributes リストから直接作成することができます)、プレースホルダーは表示されず、選択項目は空です。さらに、すべてのオプションを選択すると、nzMaxTagPlaceholder は余分な項目が選択されていることを示します。

選択した項目を動的に設定する方法を誰かに教えてもらえますか?

4

1 に答える 1

3

以下のようにsthを試してください。

selectedAttributes = [this.allAttributes[0]];

以来

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

は複雑なオブジェクトであり、その等価性は参照によってチェックされます。したがって、選択した新しいオブジェクトを定義しているため、ソース オブジェクトとは異なります。

于 2019-11-29T20:37:34.500 に答える