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 行時，它將顯示所有行。 請記住，這是非常違反直覺的，因為您不知道是否過濾了任何內容，或者顯示所有行。 我已經在我的版本中更改了該邏輯，如果所有行都被過濾掉，則不顯示任何行。