PrimeNG p-multiSelect 未显示选定值

Question

模板中我的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;

我检查了 return 值 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}

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

如果我删除 [(ngModel)]="selectedItens" 一切正常，但我需要显示已经 selected.

Answer 1

If I remove the [(ngModel)]="selectedItens" everything works fine

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

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

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

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

快乐编码..:)

PrimeNG p-multiSelect did not display selected values