PrimeNG p-multiSelect did not display selected values

Question

My p-multiSelect in the tamplate:

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

In the ngOnInit I havet this code to populate the selectedItens:

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

The selectedItens is an object like this:

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

I checked the return value witch console.log and everything looks right, but my multSelect look like this:

data["result"] sample:

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

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

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

All options appear normally in the list, but when I click on to select any more fields the checkbox is not checked despite working (the item clicked is added to the array).

If I remove the [(ngModel)]="selectedItens" everything works fine, but I need to show the itens that already beend selected.

Ganesh Ganesh · Accepted Answer · 2020-10-11T08:45:07

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

Because you are assigning whole array to ngModel so, that's not able to show proper dropdown(combo).

In your use case you need assign the selected value to [(ngModel)] not the entire list.

Here is the stackBlitz for your reference. Please try to make changes like below (P.S : working with hard coded values like below)

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

Happy Coding.. :)

PrimeNG p-multiSelect did not display selected values

1 Answers