Dropdown Generate options from function - primeng

Question

I want to generate the dropdown(https://www.primefaces.org/primeng/#/dropdown) options from a function.

Function:

 getSelectItemsByProperty(name: string): SelectItem[] {
        let resArray : SelectItem[] =[];
        this.detailService.getOptionsByProperty(name).subscribe(x => resArray = x.map(val => {
            return {
                label: val.name,
                value: val.value
            }
        }));
        console.log(resArray);
        return resArray;
    }

HTML:

<p-dropdown [options]="getSelectItemsByProperty(name)" formControlName="value"></p-dropdown>

The issue is that getSElectedItemsByProperty is getting called like CRAZY. It doesn't ever stop calling the function.

GOAL What I want to achieve is the ability to popular the dropdown without putting the selectitem array as a control in my formgroup. I want the dropdown options to be generated by the formcontrol name and the value of the dropdown should map to the formcontrol value.

Answer 1

I had the same issue than you. I was using MultiSelect and I used the onPanelShow event. in order to initialize my options.

<p-multiSelect [options]="computedOptions" (onPanelShow)="onPanelShow()"></p-multiSelect>

Then in your component:

export class MyComponent {
    computedOptions: SelectItem[];

    onPanelShow(name: string) {
        let resArray : SelectItem[] =[];
        this.detailService.getOptionsByProperty(name).subscribe(x =>                         resArray = x.map(val => {
            return {
                label: val.name,
                value: val.value
            }
        })); 
        this.computedOptions = resArray;
    }
}

In the case of dropdown, the onPanelShow event does not exist. But, I guess you should have the same behaviour with the onFocus event.