具有动态值的 PrimeNG 下拉选择选项

Question

如何设置 PrimeNG p-dropdown 选择的选项为动态值？

我正在使用 Formgroup、Formcontrol 和我的下拉菜单设置了从数据库查询数据。现在在我的一个编辑组件页面中，我想要选择具有动态值的选项。

Answer 1

1. 从数据库接收到值后，使用 SelectItems 数组设置下拉菜单的选项。

2. 将与下拉列表关联的 formControl 值设置为 SelectItem 的值。

Answer 2

获取值的动态列表并将其推送到下拉列表中。下面是一个例子。

data.dtOrgList 包含来自服务层的值列表。

    html
    ------------------
    <p-dropdown [options]="orgs" [(ngModel)]="selectedOrg"></p-dropdown>

    component.ts
    -------------------

     orgs:SelectItem[];
     selectedOrg : string;
     dtOrgList: Array<any>;

    this.itemDetailsService.getItemDetails(input).subscribe(
                data => {
                    this.dtOrgList = data.dtOrgList;
                    this.orgs = [];
                    this.orgs.push({label: 'Select', value: null});
                    for(var i = 0; i < this.dtOrgList.length; i++) {
                        this.orgs.push({label: this.dtOrgList[i], value: this.dtOrgList[i]});
                    }
                    })