typescript PrimeNG p-multiSelect未显示选定值

9rbhqvlz  于 2023-04-22  发布在  TypeScript
关注(0)|答案(2)|浏览(178)

模板中的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看起来像这样:

data["result"]样品:
0:{name:“V-123”,active:(0)
1:{name:“V-832”,active:联系人:李经理
2:{name:“V-220”,active:返回上一页

所有选项都正常显示在列表中,但当我单击以选择任何其他字段时,尽管工作,但复选框未选中(单击的项目被添加到数组中)。
如果我删除[(ngModel)]="selectedItens"一切正常,但我需要显示已经选择的itens。

sf6xfgos

sf6xfgos1#

如果我删除[(ngModel)]=“selectedItens”,一切都正常
因为你把整个数组赋值给ngModel,所以不能显示正确的dropdown(combo)。
在您的用例中,您需要将所选值分配给**[(ngModel)]**,而不是整个列表。
这里是stackBlitz供您参考。请尝试进行如下更改(P.S:使用如下硬编码值)

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

Happy Coding..:)

6vl6ewon

6vl6ewon2#

在另一个场景中,我们需要再次分配选项来反映。

this.vlans = [...this.vlans];

相关问题