Ng Select 带条件的下拉菜单

Question

我需要在 NgSelect 下拉列表 中显示 purchaseOrderStatusName。在 API 中可以使用不同的状态值，例如：OPEN、RECEIVED、CANCELLED。

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 方法本身中给出条件？

Answer 1

我想这就是您要找的。

当 purchaseOrderStatus 为 OPEN 时仅显示 referenceNumber，当 purchaseOrderStatus 为 时显示参考编号和状态名称已收到 或已取消。

根据 OP 评论更新了答案

可以在数据中添加一个新的字段标签，其值将根据需要的条件设置。

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>

Answer 2

你可以这样做，方法是使用 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>

Ng Select 带条件的下拉菜单

Ng Select dropdown with condition

angular-ngselect

angular

angular6

angular7

angular8