Angular > 材质表中的过滤器 x 2

Question

在 Angular 中，我使用带有扩展行的 Material 表，我想用 2 个过滤器对其进行过滤：第一个在“RequestId”上，第二个在“originSupplyToDestination”上。 “RequestId”上的过滤器有效。 但是对于“Origin”，我想念一些东西。

表树.html

<div class="filter">
  <span>
  <h5 class="requestid">Request ID</h5>
  <input type="text" [(ngModel)]="requestFilter" />
</span>
</div>

<div class="filter">
<span>
<h5 class="origin">Origin</h5>
<input type="text" [(ngModel)]="originFilter" />
</span>
</div>

<table mat-table [dataSource]="filteredRequests" multiTemplateDataRows class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef>{{columnNames[column]}}</th>
    <td mat-cell *matCellDef="let element">
      {{element[column]}}
    </td>
  </ng-container>

  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail" [@detailExpand]="element == expandedInfo ? 'expanded' : 'collapsed'">
        <div class="example-element-position">{{element.creationDate}}</div>
        <div class="example-element-description">
          {{element.serialNumberProductRefToSupply}}
        </div>
        <div class="example-element-description">
          {{element.serialNumberOriginSupplyToDestination}}
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row"
    [class.example-expanded-row]="expandedInfo === element" (click)="expandedInfo = element"></tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

表树.ts

import { Component, OnInit } from '@angular/core';
import {
  animate,
  state,
  style,
  transition,
  trigger
} from '@angular/animations';

@Component({
  selector: 'table-tree',
  styleUrls: ['table-tree.css'],
  templateUrl: 'table-tree.html',
  animations: [
    trigger('detailExpand', [
      state(
        'collapsed',
        style({ height: '0px', minHeight: '0', display: 'none' })
      ),
      state('expanded', style({ height: '*' })),
      transition(
        'expanded <=> collapsed',
        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
      )
    ])
  ]
})
export class TableTree implements OnInit {
  dataSource = MoveOrderData;

  expandedInfo: MoveOrderAuthorizations;
  requestFiltered = '';
  filteredRequests: MoveOrderAuthorizations[];
  originFiltered = '';
  filteredOrigin: MoveOrderAuthorizations[] = [];

  ngOnInit() {
    this.filteredRequests = this.dataSource;
    this.filteredOrigin = this.dataSource;
  }

  // Request Id Filter
  get requestFilter(): string {
    return this.requestFiltered;
  }
  set requestFilter(value: string) {
    console.log(value);
    this.requestFiltered = value;
    this.filteredRequests = this.performRequestIdFilter(value);
  }

  performRequestIdFilter(filterBy: string): MoveOrderAuthorizations[] {
    filterBy = filterBy.toLocaleLowerCase();
    this.filteredRequests = this.dataSource.filter(
      (request: MoveOrderAuthorizations) => request.requestId.includes(filterBy)
    );
    return !!filterBy && this.filteredRequests.length > 0
      ? this.filteredRequests
      : this.dataSource;
  }

    // Origin Filter
    get originFilter(): string {
      return this.originFiltered;
    }
    set originFilter(value: string) {
      console.log(value);
      this.originFiltered = value;
      this.filteredOrigin = this.performOriginFilter(value);
    }
  
    performOriginFilter(filterBy: string): MoveOrderAuthorizations[] {
      filterBy = filterBy.toLocaleLowerCase();
      this.filteredOrigin = this.dataSource.filter(
        (origin: MoveOrderAuthorizations) => origin.originSupplyToDestination.includes(filterBy)
      );
      return !!filterBy && this.filteredOrigin.length > 0
        ? this.filteredOrigin
        : this.dataSource;
    }

  columnsToDisplay = [
    'creationDate',
    'requestId',
    'issue',
    'requestType',
    'managedBy',
    'ProductRefToSupply',
    'originSupplyToDestination'
  ];

  columnNames = {
    creationDate: 'Creation Date',
    requestId: 'Request ID',
    issue: 'Issue',
    requestType: 'Request Type',
    managedBy: 'Managed by',
    ProductRefToSupply: 'Product ref to supply',
    originSupplyToDestination: 'Origin supply to Destination'
  };

  responseColumnsToDisplay = ['moveorderId', 'originDestination', 'status'];
  subColumnNames = {
    moveorderId: 'Move Order ID',
    originDestination: 'Origin Destination',
    status: 'Status'
  };
}

export interface MoveOrderAuthorizations {
  creationDate: string;
  requestId: string;
  issue: string;
  requestType: string;
  managedBy: string;
  ProductRefToSupply: string;
  originSupplyToDestination: string;
}

const MoveOrderData: MoveOrderAuthorizations[] = [
  {
    creationDate: `01/01/2021`,
    requestId: '139322',
    issue: ``,
    requestType: `Evacuation`,
    managedBy: `AGV`,
    ProductRefToSupply: `ML132345XO1211321AND11432001`,
    originSupplyToDestination: `SA-11EOL-LN001`
  },
  {
    creationDate: `01/01/2021`,
    requestId: '254982',
    issue: `Destination not found`,
    requestType: `Supply`,
    managedBy: `AGV`,
    ProductRefToSupply: `ML132345XO1211321AND11432002`,
    originSupplyToDestination: `RE-11WIP-11E03`
  }
];

对于每个过滤器，我使用 getter 和 setter 编写了一个方法来过滤显示的数据，但它不适用于第二个过滤器。

你可以去 Stackblitz > https://stackblitz.com/edit/tab-tree-filter-aa4vhx?file=app/table-tree.ts上查看表格

谢谢 ：）

编辑：最后一个问题。 我想在日期前加一个 V 形标志。 当行展开时，人字形向下。 我的问题是雪佛龙在每一行元素的前面......

Answer 1

您的方法将不起作用，因为您没有在模板中的任何地方使用filteredOrigin 。 无论如何，即使您这样做了，您也不会加入两个过滤器来过滤单个项目数组。

您可以将dataSource MatTableDataSource而不是数组（ 此处为文档）。 它具有用于过滤、分页等的基本扩展。

一旦你这样做了，你就可以创建一个自定义的filterPredicate - 即一个函数，它负责根据传递的filter值过滤记录。

然后，它会自动填写表格与filteredData ，同时仍持有的初始数据。

两个过滤字段有点棘手，因为filter值只接受字符串。 为了克服这个问题，您可以简单地将过滤器对象字符串化，然后在filterPredicate函数中再次解析它。

这是基于您的代码的stackblitz 示例。

请注意，在您的版本中，当过滤返回 0 行时，它将显示所有行。 请记住，这是非常违反直觉的，因为您不知道是否过滤了任何内容，或者显示所有行。 我已经在我的版本中更改了该逻辑，如果所有行都被过滤掉，则不显示任何行。