web-dev-qa-db-ja.com

マットテーブルのカスタムフィルター

私はマットテーブルを使用しています。 docの例でうまく機能するフィルターがあります：

https://material.angular.io/components/table/overview から、元のコードは次のとおりです。

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

   <mat-table #table [dataSource]="dataSource">
      <!-- the rest of the code -->
   </mat-table>

    export class TableFilteringExample {
     displayedColumns = ['position', 'name', 'weight', 'symbol'];
     dataSource = new MatTableDataSource(ELEMENT_DATA);

     applyFilter(filterValue: string) {
       filterValue = filterValue.trim(); // Remove whitespace
       filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filter = filterValue;
     }
    }
    const ELEMENT_DATA: Element[] = [
     {position: 1, name: 'Hydrogen', 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: 'Beryllium', weight: 9.0122, symbol: 'Be'},
     {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'}
    ];

この実装では、フィルタリングするときに、任意の列をフィルタリングします。

「名前」列だけのフィルターであるため、フィルターを変更しようとしています。そのため、フィルターを書き換えてfilterDataに割り当てようとしています。

      applyFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filteredData = this.filterByEmail(filterValue); 
        console.log(this.dataSource.filteredData); //value is what I want.
    }

    filterByName(filter: string): any {
      const dataFiltered = this.data.filter(function(item){
         return item.name.indexOf(filter) > -1
       })
        return dataFiltered;
    }

コンソールでは、this.dataSource.filteredDataに印刷したいデータがあることがわかりますが、テーブルはリロードされません。

私は何が欠けていますか？

angularangular-materialangular-material2angular-cdk
12
cucuru

私は解決策を見つけました こちら 。

filterPredicateを書き換え、通常どおり使用する必要があります。filterPredicateは、フィルターが通過したときにtrueを返し、そうでない場合はfalseを返す必要があります。

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


dataSource = new MatTableDataSource(ELEMENT_DATA);
/* configure filter */
this.dataSource.filterPredicate = 
  (data: Element, filter: string) => data.name.indexOf(filter) != -1;


applyFilter(filterValue: string) {
   filterValue = filterValue.trim(); // Remove whitespace
   filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
   this.dataSource.filter = filterValue;
 }
26
cucuru

データに.trim().toLowerCase()を適用することを忘れないでください。予期しない結果が発生する可能性があります。以下の例を参照してください。

this.dataSource.filterPredicate = (data:
  {name: string}, filterValue: string) =>
  data.name.trim().toLowerCase().indexOf(filterValue) !== -1;

applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
}
2
Loïc Gaudard

テーブルの行に表示されるクラスのすべてのフィールドは、そのフィールドを列として表示しなくてもフィルタリングの対象になることに注意してください。

export class City {
  id: number;//is not displayed in mat table
  code: string;
  name: string;
  country:Country;
}

CityテーブルのdataSourceのフィルターは、id列にも適用されます。これは通常、エンドユーザーには表示されません。

//this filter will also apply to id column
this.cityDataSource.filter = filterValue;
0
Selman Gun