angular 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 仅在用户名中，这在 angular 垫 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 条件，并尝试根据您的要求从 if 条件 return 为真。

您的代码可能如下所示

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();

  }

让我知道它是否有效，我没有尝试过，但我认为它会有效；

angular 5 中的多个过滤器谓词

multiple filterpredicate in angular 5

angular

angular5