如何在 Angular 中过滤 table（使用管道比较转换后的数据）？

Question

我正在尝试使用搜索框和自定义管道在 Angular 中过滤 Table。某些值显示在 table 中使用管道，例如：

 {{order.tot | currency: 'EUR':'symbol':'.2-2':'it' }}
 {{order.datePayment | date: 'dd/MM/yyyy hh:mm:ss' }}

这里是自定义管道：

export class SearchFilterOrdersPipe implements PipeTransform {

  transform(orders, searchValue: string): unknown {

    if (!orders || !searchValue) {
      return orders;
    }

    searchValue = searchValue.toLocaleLowerCase();
    return orders.filter(order =>
      order.idOrder.toString().includes(searchValue) ||
      order.email.toLocaleLowerCase().includes(searchValue) ||
      order.invoice.toLocaleLowerCase().includes(searchValue) ||
        //  order.datePayment.toString().includes(searchValue) ||
      order.paypalPaymentId.toLocaleLowerCase().includes(searchValue) ||
        //  order.tot.toString().includes(searchValue) ||
      order.status.includes(searchValue)
    )
  }
}

对于 table 的所有字符串值，我没有任何问题。但是 'tot' 和 'datePayment' 原来的格式是：

order.datePayment: 2021-01-13T09:27:11.000Z
order.tot: 100 或 15.50 或 20

所以我永远不会捕捉到正确的值（例如，如果我搜索数据“17/01/2021”或像 15,50 这样的数字）。

在 .includes() 之前的管道 'datePayment' 和 'tot' 中是否也有一些方法可以转换？？

谢谢。

Answer 1

您的 html 中的管道仅用于显示，因此您无法在您的管道中访问它。可以注入管道再改造一下：

export class SearchFilterOrdersPipe implements PipeTransform {

  constructor(private date: DatePipe, private curreny: CurrencyPipe) {
  }

  transform(orders, searchValue: string): unknown {
    if (!orders || !searchValue) {
      return orders;
    }

    searchValue = searchValue.toLocaleLowerCase();
    return orders.filter(order =>
      this.date.transform(order.datePayment, 'dd/MM/yyyy hh:mm:ss').includes(searchValue) ||
      this.currency.transform(order.tot, 'EUR', 'symbol', '.2-2', 'it').includes(searchValue) ||
      ...
    )
  }
}

如何在 Angular 中过滤 table（使用管道比较转换后的数据）？

How filter a table ( comparing a transformed data using a pipe ) in Angular?

javascript

html-table

filter

ng-bootstrap

angular