选择带有条件的下拉菜单

debugcn 发表于 Dev

天使雷吉

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

TS文件：

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

选择下拉：

<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'] 中得到了所有值。现在显示所有参考编号。

问题：-

现在如何在purchaseOrderStatusName="OPEN"处显示referenceNumber

除了在 NgSelect 下拉列表中给出条件之外，有没有办法在 get 方法本身中给出条件？

abd995

我想这就是你要找的。

仅显示referenceNumber何时purchaseOrderStatus是OPEN以及参考号和状态名称何时purchaseOrderStatus是RECEIVED或CANCELED。

根据 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;
  });
}

选择下拉：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。