Primeng: MultiSelect doesn't refresh placeholder after binded [option] model change

[pserafin]

Hi,
using:
"primeng": "1.1.0",
"@angular": "2.0.1",

1st example
Multiselect [options] is binded to NOT EMPTY array [{label, value}], we select some values (those are presented in

2nd example
Multiselect[options] is binded to EMPTY array [{label, value}]. First in .ts i set some value [(ngModel)] <= {1}. Placeholder shows 'null' (correct), after that I populate [options] => but placeholder doesnt refresh (even if label for value 1 is listed, placeholder keeps old 'null' value)

3rd example
Same problem with default placeholder (defaultLabel="{{'FUEL_TYPE' | translate}}" nor [defaultLabel]="'FUEL_TYPE' | translate", where 'FUEL_TYPE' is json dict. key translated in pipe) doesnt change.

If multiselect list is able to detect [options] change, so control also should reload its placeholder after an [option] change.

[loftyduck]

Here's a plnkr showing the 2nd example:
http://plnkr.co/edit/6PTKpx?p=preview

[cagataycivici]

Will be reviewed for 4.1.1

[0crypto0]

Do you know when this problem will be fixed?

[rashnk]

Not fixed, Stackblitz here https://stackblitz.com/edit/primengstackblitz-mutiselect

[parisgianluca]

For those who still have this problem, as a workaround declare a ViewChild of your multiselect

@ViewChild('mySelect') mySelect: MultiSelect;

And after you update your model call

this.mySelect.ngOnInit()

[mergin]

For those who still have this problem, as a workaround declare a ViewChild of your multiselect

@ViewChild('mySelect') mySelect: MultiSelect;

And after you update your model call

this.mySelect.ngOnInit()

I used this solution but I had to wrapped inside a timeout because of JS event cycle:

setTimeout(()=>{ this.mySelect.ngOnInit(); },0);

[maazanzar]

This should resolve the issue
Add this line in change event of array
this.cities2=Object.assign([],this.cities2);
<p-multiSelect #mySelect [options]="cities2" [(ngModel)]="selectedCities2" optionLabel="name"></p-multiSelect>

[lwestfall]

Slightly cleaner (imo) version of @maazanzar's workaround using the spread operator:

this.cities2 = [...this.cities2];

[jorgepazp]

for anyone looking into this, I had the same issue when working with reactive forms.
what i did was to reassign the values of the form that were using the multiselect inside a timeout.
setTimeout(() => { this.form.get('selectedCoaches').patchValue(selectedCoaches); this.form.get('selectedColaborators').patchValue(selectedColaborators); }, 0);
honestly i thought i was missing something but this seems more of a bug

[yigitfindikli]

This is about Angular's change detection. You can use spread operator;
this.selectedCities = [...{...}];