下拉从函数生成选项 - primeng答案

【问题标题】：Dropdown Generate options from function - primeng下拉从函数生成选项 - primeng
【发布时间】：2017-10-01 10:53:48
【问题描述】：

我想从一个函数中生成下拉(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 被称为疯狂。它永远不会停止调用该函数。

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

【问题讨论】：

为什么要使用函数？

标签： javascript angular primeng

【解决方案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 事件有相同的行为。

【讨论】：