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被调用为CRAZY。它永远不会停止调用该函数。

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

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 事件有相同的行为。

下拉列表从函数 - primeng生成选项

1 个答案: