Как использовать primeng выпадающий? - PullRequest
Новая
       24

Как использовать primeng выпадающий?

0 голосов
/ 03 апреля 2019

Я использовал «выбрать» для выпадающего списка.Ниже приведена кодировка. 

<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 в качестве моего сохраненного значения и код в качестве отображаемого значения.

Мне нужна та же концепция с использованием компонента primeNg.

Ответы [ 2 ]

0 голосов
/ 03 апреля 2019

Во-первых, вам нужно создать один массив в вашем файле TS с полем метки и значения.что-то вроде этого: 

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

здесь, в поле метки, вам необходимо присвоить его код , поскольку поле метки будет использоваться в качестве отображаемого значения в раскрывающемся списке и в поле значения,вам нужно присвоить его id , так как он будет использоваться в качестве сохраненного значения этой конкретной опции.

и в файле HTML 

<div class="ui-grid-col-6">
      <div class="form-group">
       <p-dropdown [options]="PurchaseOrderStatus" [(ngModel)]="selectedOrders" [filter]="true"></p-dropdown>
     </div>
</div>
0 голосов
/ 03 апреля 2019

Вы можете использовать что-то вроде приведенного ниже кода для замены выпадающего списка PrimeNG на существующий.

Шаг 1: Импортировать DropdownModule в свой компонент. 

import {DropdownModule} from 'primeng/dropdown';

Шаг 2. Добавьте раскрывающийся список в html: 

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

Таким образом, в selectedPurchaseOrderStatus вы получите выбранный объект заказа и можете получить идентификатор, например selectedPurchaseOrderStatus.id.

Вы также можете использовать событие OnChange для получения выбранных параметров. 

onChange()

event.originalEvent: событие браузера

event.value: значение выбранного параметра

Обратный вызов для вызова при изменении значения раскрывающегося списка.

, для получения дополнительной информации о проверке ниже ссылки раскрывающегося списка в PrimeNG.

PrimeNG Dropdown

Надеюсь, это поможет.

...