Ng Выберите выпадающий список с условием - angular


0

Мне нужно отобразить purchaseOrderStatusName в раскрывающемся меню NgSelect. В API доступны различные значения состояния, такие как: ОТКРЫТО, ПОЛУЧЕНО, ОТМЕНЕНО.

Файл TS:

  getAllPurchaseOrders() {
    this.purchaseOrderService.getAllPurchaseOrders().subscribe(
      data => { this.formModel.schema.purchaseOrders[purchaseOrders] = data; 
    });
  }

Ng-Select Раскрывающийся список:

<ng-select [items]=" formModel.schema.purchaseOrders[purchaseOrders]" bindLabel="referenceNumber" 
bindValue="id" placeholder="Select PO" clearAllText="Clear" formControlName="purchaseOrderId">

   <ng-template ng-label-tmp let-item="item">
      <span [ngOptionHighlight]="search">
          {{ item.referenceNumber +-+ item.purchaseOrderStatusName}}
     </span>
   </ng-template>
   <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
      <span [ngOptionHighlight]="search">
          {{ item.referenceNumber +-+ item.purchaseOrderStatusName}}
      </span>
   </ng-template>

</ng-select>

Я получил все значения в formModel.schema.purchaseOrders [purchaseOrders]. Теперь отображается весь ссылочный номер.

Вопрос: -

Теперь, как отобразить referenceNumber, где purchaseOrderStatusName = "OPEN"

Вместо предоставления условия в выпадающем списке NgSelect, есть ли способ дать условие в самом методе get?

Источник
  •  56
  •  2
  • 3 май 2020 2020-05-03 02:29:06

2 ответа

1

Вы можете сделать это, используя ng-container

  <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
      <span [ngOptionHighlight]="search">
        <ng-container *ngIf="item.purchaseOrderStatusName===OPEN">
          {{ item.referenceNumber}}
        </ng-container>
        <ng-container *ngIf="item.purchaseOrderStatusName!==OPEN">
          {{ item.referenceNumber +-+ item.purchaseOrderStatusName}}
        </ng-container>
      </span>
   </ng-template>
1

Я думаю, это то, что вы ищете.

Показывать только referenceNumber, когда purchaseOrderStatus является ОТКРЫТОМ, а также ссылочный номер и название состояния, когда purchaseOrderStatus имеет значение ПОЛУЧЕНО или ОТМЕНЕНО.

Обновленный ответ на основе комментария ОП

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

Файл TS:

import { map } from rxjs/operators;

getAllPurchaseOrders() {
  this.purchaseOrderService.getAllPurchaseOrders()
  pipe(
    map(data => {
      data.label =
        data.purchaseOrderStatusName !== OPEN
          ? data.referenceNumber + - + data.purchaseOrderStatusName
          : data.referenceNumber;
    })
  )
  .subscribe(
    data => { this.formModel.schema.purchaseOrders[purchaseOrders] = data;
  });
}

Ng-Select Выпадающий:

<span [ngOptionHighlight]="search">
    {{ item.label }}
</span>

Предыдущий ответ:

Условие задано внутри выпадающего списка ngSelect без манипулирования данными

Однострочный подход -

<span [ngOptionHighlight]="search">
    {{ item.referenceNumber }} {{ item.purchaseOrderStatusName !== OPEN ? - + item.purchaseOrderStatusName :  }}
</span>

Многострочный подход -

<span *ngIf="item.purchaseOrderStatusName !== OPEN" [ngOptionHighlight]="search">
  {{ item.referenceNumber +-+ item.purchaseOrderStatusName }}
</span>
<span *ngIf="item.purchaseOrderStatusName === OPEN" [ngOptionHighlight]="search">
  {{ item.referenceNumber }}
</span>        
  • 3 май 2020 2020-05-03 02:29:07