wake-up-neo.com

benutzerdefinierte filter in mat-table

Ich benutze Mat-Table. Es hat einen Filter, der gut mit doc-Beispiel funktioniert:

Von https://material.angular.io/components/table/overview lautet der ursprüngliche Code:

    <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'}
    ];

Bei dieser Implementierung wird beim Filtern nach jeder Spalte gefiltert.

Jetzt versuche ich, den Filter zu ändern, weil ich nur für die Spalte "Name" filtern möchte. Ich versuche, den Filter neu zu schreiben und filterData zuzuweisen.

      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;
    }

In der Konsole kann ich sehen, dass this.dataSource.filteredData die Daten hat, die ich drucken möchte, aber die Tabelle nicht neu geladen wird.

Was fehlt mir?

angularangular-materialangular-material2angular-cdk
9
cucuru

Ich habe die Lösung hier gefunden.

Es ist notwendig, filterPredicate neu zu schreiben und es wie gewohnt zu verwenden. filterPredicate muss true zurückgeben, wenn der Filter durchläuft, und false, wenn dies nicht der Fall ist

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;
 }
21
cucuru

Vergessen Sie nicht, .trim().toLowerCase() auf Ihre Daten anzuwenden, da dies zu unerwarteten Ergebnissen führen kann. Siehe mein Beispiel unten:

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

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

Beachten Sie, dass alle Felder der Klasse, die in Tabellenzeilen angezeigt werden, einer Filterung unterliegen, auch wenn Sie dieses Feld nicht als Spalte anzeigen.

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

Jeder Filter für die dataSource der Städtetabelle gilt auch für die id-Spalte, die wir dem Endbenutzer im Allgemeinen nicht anzeigen.

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