javascript - 下拉菜单 从函数生成选项 - primeng

Question

我想从函数生成下拉菜单 ( https://www.primefaces.org/primeng/#/dropdown ) 选项。

功能:

 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>

问题是 getSElectedItemsByProperty 被疯狂地调用。它永远不会停止调用该函数。

目标我想要实现的是能够流行下拉列表，而不将选择项数组作为我的表单组中的控件。我希望通过表单控件名称生成下拉选项，并且下拉列表的值应映射到表单控件值。

Answer 1

我也遇到了和你一样的问题。我正在使用 MultiSelect我使用了 onPanelShow 事件。为了初始化我的选项。

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

然后在你的组件中:

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;
    }
}

以dropdown为例，onPanelShow 事件不存在。但是，我想您应该对 onFocus 事件有相同的行为。