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

问题描述

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

<div class="form-group"><select name="status" formControlName="purchaseOrderStatusId"><option>选择 PurchaseOrderStatus</option><option *ngFor="let PurchaseOrderStatus of allPurchaseOrderStatus" value="{{ PurchaseOrderStatus.id }}">{{ PurchaseOrderStatus.code }}</选项></选择>

此处来自 API 的所有值都保存在变量 allPurchaseOrderStatus 中.

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

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

解决方案

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

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

从'primeng/dropdown'导入{DropdownModule}；

第 2 步:在您的 html 中添加下拉菜单:

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

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

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

onChange()

<块引用>

event.originalEvent:浏览器事件

event.value:选择的选项值

下拉列表值更改时调用的回调.

有关更多示例，请查看 PrimeNG 中的下拉列表链接.

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>

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

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

I need the same concept using the primeNg component.

解决方案

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

Step 1: Import DropdownModule in your component.

import {DropdownModule} from 'primeng/dropdown';

Step 2: Add Dropdown in your html:

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

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

You can also use OnChange event to get selected options.

onChange()

event.originalEvent: Browser event

event.value: Selected option value

Callback to invoke when value of dropdown changes.

for more example check below link of Dropdown in PrimeNG.

PrimeNG Dropdown

Hope this will helps.

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