PrimeNG p-multiSelect 未显示所选值答案

【问题标题】：PrimeNG p-multiSelect did not display selected valuesPrimeNG p-multiSelect 未显示所选值
【发布时间】：2021-01-25 19:02:09
【问题描述】：

我在模板中的p-multiSelect：

<p-multiSelect
    name="selectedItens" 
    [options]="vlans" 
    [(ngModel)]="selectedItens" 
    optionLabel="name" 
></p-multiSelect>

在 ngOnInit 中，我没有此代码来填充 selectedItens：

this._myService
.getSelectedItens(this.myDto.id)
.pipe()
.subscribe(data => {
    this.selectedItens = data["result"];
});

selectedItens 是这样的对象：

name: string | undefined;
active: Boolean | undefined;
id: number;

我检查了 wwitch console.log 的返回值，一切正常，但我的 multSelect 看起来像这样：

data["result"] 示例：

0: {name: "V-123", active: true, id: 3}

1: {name: "V-832", active: false, id: 333}

2: {name: "V-220", active: false, id: 6}

所有选项都正常显示在列表中，但是当我单击以选择更多字段时，尽管工作正常，但未选中复选框（单击的项目已添加到数组中）。

如果我删除 [(ngModel)]="selectedItens" 一切正常，但我需要显示已选择的项目。

【问题讨论】：

【解决方案1】：

如果我删除 [(ngModel)]="selectedItens" 一切正常

因为您将整个数组分配给ngModel，所以无法正确显示dropdown(combo)。

在您的用例中，您需要将所选值分配给 [(ngModel)] 而不是整个列表。

这里是stackBlitz 供您参考。请尝试进行如下更改（PS：使用如下硬编码值）

 this.selectedItem =  this.selectedItem.concat(this.vlans[1].value);

编码愉快.. :)

【讨论】：

我使用的是 p-multiSelect 而不是 p-dropdown，在 multiSelect 中它应该接受一个数组：primefaces.org/primeng/showcase/#/multiselect
我在 stackBlitz 中按照您的示例进行了操作，它起作用了 :) 我认为它以前不起作用，因为我没有使用 SeleteItem 而是使用自定义对象。