множественный фильтр-предикат в угловых 5

Question

Так что я пытаюсь реализовать несколько фильтров, один для поиска только по имени пользователя, а другой при поиске в каждом поле

 export class MemberComponent implements OnInit {
      dataSource;
      displayedColumns: string[] = ['name', 'username', 'email', 'buttons'];
      listItems = ["Bret", "Antonette", "Samantha", "An"];
      constructor(private memSer: MemberService) { }

      @ViewChild(MatPaginator) paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;

      ngOnInit() {
        this.memSer.getMember().subscribe(
          (data) => {
            //this.dataSource.paginator = this.paginator;
            this.dataSource = new MatTableDataSource(data);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
            this.dataSource.filterPredicate =
              (data: Element, filter: string) => {
                return data['username'].trim().toLowerCase().indexOf(filter) != -1;
              }

          }
        )

      }

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

  }
  searchFilter(filterValue: string) {
    console.log(filterValue);
    this.dataSource.filter = filterValue.trim().toLowerCase();

  }

searchfilter должен искать в каждом поле, в то время как applyfilter только по имени пользователя, этовозможно в угловом мате 5?

Вот HTML

 <mat-form-field>
    <mat-select placeholder="ID" (selectionChange)="applyFilter($event.value)">
    <mat-option *ngFor="let food of listItems" [value]="food">
      {{food}}
    </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field>
  <input matInput (keyup)="searchFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<div class="mat-elevation-z8">
  <table matSort mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let member">{{member.name}}</td>
    </ng-container>

    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>UserName</th>
      <td mat-cell *matCellDef="let member">{{member.username}}</td>
    </ng-container>

    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
      <td mat-cell *matCellDef="let member">{{member.email}}</td>
    </ng-container>

    <ng-container matColumnDef="buttons">
      <th mat-header-cell *matHeaderCellDef>Buttons</th>
      <td mat-cell *matCellDef="let member"><span (click)="hello(member.name)">Hello</span></td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>

Могу ли я даже создать разные фильтры для разных полей?

Answer 1

Вы можете использовать флаг, чтобы различать несколько предикатов фильтра.Для разных флагов выполняются разные условия if, и попробуйте вернуть true из условий if согласно вашему требованию.

ваш код может выглядеть следующим образом

searchIn = 0;


this.dataSource.filterPredicate =
              (data: Element, filter: string) => {
                if(searchIn == 1)
                       return data['username'].trim().toLowerCase().indexOf(filter) != -1;
              else{
                 const datasrc = data['username']+data['name']
                  return datasrc.trim().toLowerCase().indexOf(filter) != -1;
             }                  
          }


applyFilter(filterValue: string) {
    console.log(filterValue);
this.searchIn=1;
    this.dataSource.filter = filterValue.trim().toLowerCase();

  }
  searchFilter(filterValue: string) {
    console.log(filterValue);
this.searchIn=0;
    this.dataSource.filter = filterValue.trim().toLowerCase();

  }

Дайте мне знать, если он работает, яне пробовал, но я думаю, что это сработает;