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

Question

In Angular, I use a Material table with expanded rows and I want to filter it with 2 filters: the first one on "RequestId" and the second on "originSupplyToDestination". The filter on "RequestId" works. But with "Origin", I miss something.

table-tree.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>

table-tree.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`
  }
];

For each filter, I wrote a method with getter and setter to filter the data which are displayed but it doesn't work with the second filter.

You can go and see the table on Stackblitz > https://stackblitz.com/edit/tab-tree-filter-aa4vhx?file=app/table-tree.ts

Thanks :)

EDIT: Last question. I'd like to add a chevron before the date. When the row expands, the chevron turn down. My problem is the chevron is in front of every row elements...

Answer 1

Your approach will not work, since you're not using your filteredOrigin anywhere in your template. Anyway, even if you did, you're not joining your both filters to filter a single array of items.

You can make your dataSource a MatTableDataSource instead of an array (docs here ). It has basic extensions used for filtering, paging, etc.

Once you do that, you can create a custom filterPredicate - ie a function that is responsible for filtering records based on passed filter value.

Then, it will automatically fill the table with the filteredData , while still holding the initial data.

It's a bit trickier with two filtering fields, since filter value only accepts string. To overcome that, you can simply stringify your filter object, and then parse it again inside the filterPredicate function.

Here's a stackblitz example based on your code.

Note that in your version, when filtering returned 0 rows, it would display all the rows. Have in mind that this is VERY counterintuitive since you don't know if anything was filtered, or all rows are displayed. I've changed that logic in my version to simply NOT display any rows if all the rows are filtered out.