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条件，并尝试根据您的要求从if条件返回true。

您的代码可能看起来像这样

from my_package.my_sub_package.module2 import *

让我知道它是否有效，我还没有尝试过，但我认为它将起作用；

角度为5的多重过滤谓词

1 个答案: