当我们在使用Angular 6的材质中使用表格过滤时使用过滤器时出现问题

时间:2019-03-26 09:56:46

标签: angular typescript angular6

我正在使用垫子桌子。它的过滤器无法正常工作。

过滤器无法处理以下数据。

它不能根据客户对象过滤数据,也不能用于_id,并且所有数据都经过了完美过滤。

样本数据:

{
  advance: 100
  balance: 400
  category: "Suit"
  cloth_material: "febric "
  cloth_measurements: "5m"
  completion_date: "2019-03-21T18:30:00.000Z"
  createdAt: "2019-03-26T09:00:51.362Z"
  customer: {name: "Riya", phone_number: "9711280827"}
  design_photo: "vbnvb"
  febric_photo: "vnb"
  fit_type: "Standard Fit"
  measurement_type: "Inch",
  order_status: "InProcess"
  order_taken_by: "dsfsdf"
  price: 500
  remarks: "nhbghjghj"
  tailor: "SRS"
  user: "5c99ddfce7aebc28fc8ef4a7"
  __v: 0
  _id: 2
}

TS代码:

applyFilter(filterValue: any) {
  filterValue = filterValue.trim();
  filterValue = filterValue.toLowerCase();
  this.orderData.filter = filterValue;

  if (this.orderData.paginator) {
    this.orderData.paginator.firstPage();
  }
}

HTML代码:

<mat-form-field>
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

那么我们如何根据上述数据过滤数据。 我想搜索orderData中的所有数据。

1 个答案:

答案 0 :(得分:2)

您可以使用DataSource的applyFilter()方法来实现自定义过滤器,因此请按以下方式更改applyFilter(filterValue: string) { this.dataSource.filter = filterValue.trim().toLowerCase(); this.dataSource.filterPredicate = (data, filter: string) => { const managedList = (currentTerm, key) => { return key === 'customer' ? currentTerm + data.customer.name : currentTerm + data[key]; }; const value = Object.keys(data).reduce(managedList, '').toLowerCase(); const customeFilter = filter.trim().toLowerCase(); return value.indexOf(customeFilter) !== -1; }; }

struct dirent

StackBlitz