Primeng: Dropdown preselection might fail if options initialized later

[cagataycivici]

If options are initialized/changed later then the ngModel value, then preselection fails.

[rhornrrs]

I am still experiencing this issue with PrimeNG 4.2.0-rc.1. The object bound to the ngModel is set before the list is built. This results in the dropdown not showing the set value.

The scenario is that a user selects a ticket from a datatable on another tab. When this ticket is selected the full ticket data is loaded from the Database and set to the object bound to the dropdowns ngModel. The active tab is then changed to the tab that contains the form with the dropdown, and the component that handles this form's ngOninit initializes the dropdown list. If the tab that contains the form is not set to lazy the dropdown loads fine, and the selected value is displayed, but if it is lazy, meaning the list gets initialized when the tab is selected after the ngModel value has been set, the value is not displayed.

[broweratcognitecdotcom]

What is the solution? Why was this closed?

[rhornrrs]

I believe @cagataycivici stated that it is a change detection issue, and he was unable to reproduce. I have yet to look back into the project I was having this issue to verify. Try installing loadash into your project, and use either clone(), or cloneDeep() on the collection bound to the dropdown.

[broweratcognitecdotcom]

I was able to hack it to work.

[TipsyFingers]

I am still experiencing this issue, any info on how to solve it?

[NishantJava]

@broweratcognitecdotcom
How did you fixed it?

[broweratcognitecdotcom]

@NishantJava switch to reactive forms

[NishantJava]

I managed to fix this by initializing _"selected ngModel"_ in execution-complete of subscribe for Observable of _"list ngModel"_. This will delay initializing selected value until list is fully initialized.

this.currencyList = [];
this.currencyService.getCurrencies().subscribe(
  currency => this.currencyList.push({ label: currency.code, value: currency }),
  error => MessageUtil.addError(this.messageService, 'Error in loading Currencies', error),
  () => this.getSelectedCurrency()
);

[amuratgencay]

this.currencyService.getAll().subscribe(
(res: Array) => {
this.currencyList = res.map(i => { return { label: i.currency, value: i.id } });
},
error => console.log);

[gokhancelik]

The array reference needs to change as @amuratgencay did.
You should not initialize and push the array. You should set each time with the value from the service to change reference value to detect the changes.

this.currencyService.getCurrencies().subscribe(
  currency => this.currencyList.map(i => { return { label: currency.code, value: currency } }),
  error => MessageUtil.addError(this.messageService, 'Error in loading Currencies', error),
  () => this.getSelectedCurrency()
);

Here is an example
https://stackblitz.com/edit/angular6-primeng-eqttey

[RembertoP]

Work for me. maybe help u.
////ts
categories: any [];
.....
this.itemService.getAllCategories().subscribe((res: any) => {
this.categories = res.map((i: any) =>
({label: i.category_nm, value : i.id})
);
////// html

[deusmar]

Maybe it's too late, but...
Check if you are getting a mismatch problem.
Ex:
previously selected: {value: '1', label: 'Test'} (value is a string)
arrayOfOptions: {value: 1, label: 'Test'} (value is an integer)