angular - 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;

我检查了 console.log 的返回值，一切看起来都正确，但我的 multSelect 看起来像这样:

数据[“结果”]示例:

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" 一切正常，但我需要显示已选择的 itens。

Answer 1

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

因为您将整个数组分配给 ngModel，所以无法显示正确的下拉列表(组合)。

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

这是stackBlitz供你引用。请尝试进行如下更改(P.S:使用如下硬编码值)

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

快乐编码..:)