Question

无论用户是否输入任何重音，我都希望过滤表的名称。

例如：

如果用户输入“氢气”，则结果应显示表格中的“氢气”。

我使用Angular 8.1.3和Angular Material 8.0.1

这是我的代码：

app.component.html：

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

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
...

我的界面：

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

app.component.ts：

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrôgen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Béryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Bóron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'ÔLxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = new MatTableDataSource(ELEMENT_DATA);

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  setupFilter(column: string) {
    this.dataSource.filterPredicate = (d: any, filter: string) => {
      const textToSearch = d[column] && d[column].toLowerCase() || '';
      return textToSearch.indexOf(filter) !== -1;
    };
  }

  public removeAccents(str: string): string {
    return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
  }

我希望当用户输入“ bo”显示在表2中包含“碳”和“玻隆”的行中。

Answer 1

这是当您在mat-table中使用过滤时Angular材质依靠的代码

filterPredicate: ((data: T, filter: string) => boolean) = (data: T, filter: string): boolean => {
  // Transform the data into a lowercase string of all property values.
  const dataStr = Object.keys(data).reduce((currentTerm: string, key: string) => {
    // Use an obscure Unicode character to delimit the words in the concatenated string.
    // This avoids matches where the values of two columns combined will match the user's query
    // (e.g. `Flute` and `Stop` will match `Test`). The character is intended to be something
    // that has a very low chance of being typed in by somebody in a text field. This one in
    // particular is "White up-pointing triangle with dot" from
    // https://en.wikipedia.org/wiki/List_of_Unicode_characters
    return currentTerm + (data as {[key: string]: any})[key] + '◬';
  }, '').toLowerCase();

  // Transform the filter by converting it to lowercase and removing whitespace.
  const transformedFilter = filter.trim().toLowerCase();

  return dataStr.indexOf(transformedFilter) != -1;
}

我们继续进行此filterPredicate()的修改，以使其符合您的需求。您已经展示了如何删除代码中的重音符号和变音符号。我们将在新的filterPredicate中使用它。

this.dataSource.filterPredicate = (data: PeriodicElement, filter: string): boolean => {
  const dataStr = Object.keys(data).reduce((currentTerm: string, key: string) => {
    return (currentTerm + (data as { [key: string]: any })[key] + '◬');
  }, '').normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();

  const transformedFilter = filter.trim().normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();

  return dataStr.indexOf(transformedFilter) != -1;
  }
}

我们从表格中的值和过滤器值中都删除了重音符号/变音符号，因此即使用户碰巧输入了具有重音符号/变音符号的字符，过滤器也将继续正确过滤。

这是StackBlitz上的一个有效示例。

如何过滤带有重音符号/变音符号的MatTable？

1 个答案: