如何使用primeng下拉菜单？

Question

我使用“选择”作为下拉菜单。下面是代码。

<div class="ui-grid-col-6">
      <div class="form-group">
        <select name="status" formControlName="purchaseOrderStatusId">
          <option>Select PurchaseOrderStatus</option>
          <option *ngFor="let PurchaseOrderStatus of allPurchaseOrderStatus" value="{{ PurchaseOrderStatus.id }}">
                 {{ PurchaseOrderStatus.code }}
          </option>
        </select>
     </div>
</div>

API 中的所有值都保存在变量 allPurchaseOrderStatus 中。

我希望 id 作为我的存储值，code 作为显示值。

我需要使用 primeNg 组件的相同概念。

Answer 1

您可以使用类似下面的代码将PrimeNG 下拉列表替换为您现有的。

第 1 步：在您的组件中导入 DropdownModule。

import {DropdownModule} from 'primeng/dropdown';

第 2 步：在 html 中添加下拉菜单：

<p-dropdown [options]="PurchaseOrderStatus" [(ngModel)]="selectedPurchaseOrderStatus" optionLabel="code">

所以在selectedPurchaseOrderStatus 中，您将获得选定的订单对象，您可以获得像selectedPurchaseOrderStatus.id 这样的id。

您还可以使用OnChange 事件来获取选定的选项。

onChange()

event.originalEvent：浏览器事件

event.value：选择的选项值

当下拉列表的值改变时调用的回调。

如需更多示例，请查看 PrimeNG 中的 Dropdown 链接。

PrimeNG Dropdown

希望这会有所帮助。

Answer 2

首先，您需要在 TS 文件中创建一个包含标签和值字段的数组。 像这样：

PurchaseOrderStatus=[
 {label:'code1',value:'id1'},
 {label:'code2',value:'id2'},
 .....
]

这里，在label字段中，需要赋值code，因为label字段会作为下拉列表中的显示值，而在value字段中，需要赋值id 因为它将用作该特定选项的存储值。

在 HTML 文件中

<div class="ui-grid-col-6">
      <div class="form-group">
       <p-dropdown [options]="PurchaseOrderStatus" [(ngModel)]="selectedOrders" [filter]="true"></p-dropdown>
     </div>
</div>