如何使用primeng下拉菜单? [英] How to use primeng dropdown?

问题描述

我在下拉菜单中使用了选择".下面是编码.

I used the "select" for the dropdown. Below is the coding.

<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 中.

Here all values from the API are saved in the variable allPurchaseOrderStatus.

我想要 id 作为我的存储值，并 code 作为显示值.

And I want id as my stored value and code as the display value.

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

I need the same concept using the primeNg component.

推荐答案

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

You can use something like below code to replace PrimeNG dropdown with your existing one.

第1步:在组件中导入DropdownModule.

import {DropdownModule} from 'primeng/dropdown';

第2步:在HTML中添加下拉菜单:

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

因此，在selectedPurchaseOrderStatus中，您将获得选定的订单对象，并且可以获得与selectedPurchaseOrderStatus.id类似的ID.

So in selectedPurchaseOrderStatus you will get selected order object and you can get id like selectedPurchaseOrderStatus.id.

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

You can also use OnChange event to get selected options.

onChange()

event.originalEvent:浏览器事件

event.originalEvent: Browser event

event.value:选定的选项值

event.value: Selected option value

回调，以在下拉菜单值更改时调用.

有关更多示例，请检查PrimeNG中Dropdown的链接.

for more example check below link of Dropdown in PrimeNG.

PrimeNG下拉

希望这会有所帮助.

这篇关于如何使用primeng下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！