垫表应用过滤器，以一列上触发检查和复位时未检查

Question

我使用的角7和材料2，我有几个列的mat-table和桌子底下我有一个mat-slide-toggle。

当mat-slide-toggle变得checked，我想用一个确切的字符串匹配滤波器（“活动”）来过滤一列（状态）。然后，当mat-slide-toggle是unchecked，我想从柱而显示为正常删除该过滤器。

我看像custom filter in mat-table在那里设置自定义this.dataSource.filterPredicate，我已经能够做到好例子，但我有点难倒：

• 当mat-slide-toggle未被选中，移除过滤器。
• 当使用表上方的自由文本过滤器选项（参见下面的代码），使用默认筛选器中的所有列。

我觉得第二点，我需要重新this.dataSource.filterPredicate回其默认值，但我不能确定的代码来做到这一点。

---

这里是我的去除保持对它们的点不必要的部分代码示例。状态属性只有两个值“有效”和“无效”，我想只过滤“活动”用户。

example.component.ts

export class UserComponent implements OnInit {
  users: User[] = [];
  displayedColumns: string[] = ['name', 'status'];
  dataSource = new MatTableDataSource(this.users);

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

  constructor(private usersService: UsersService) { }

  ngOnInit() {
    this.getUsers();
    this.dataSource = new MatTableDataSource(this.users);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  activeUserToggle(changeEvent: MatSlideToggleChange) {
    if (changeEvent.checked) {
      this.dataSource.filterPredicate =
        (user: User, filter: string) => user.status.indexOf(filter) != -1;
    } else {

    }
  }

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

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

example.component.html

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

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort>

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

      <ng-container matColumnDef="status">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> <b>Status</b> </th>
          <td mat-cell *matCellDef="let row"> {{row.status}} </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row;
                              let even = even;
                              columns: displayedColumns;" [ngClass]="{grey: even}">
      </tr>
    </table>

    <mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
  </div>

  <mat-slide-toggle class="activeUserSlide" (change)="activeUserToggle($event)">Show only active users</mat-slide-toggle>

Answer 1

未选中时，您可以重置回值，以this.users。

activeUserToggle(changeEvent: MatSlideToggleChange) {
    if (changeEvent.checked) {
      this.dataSource.filterPredicate =
        (user: User, filter: string) => user.status.indexOf(filter) != -1;
    } else {
      this.dataSource.data = this.users;
    }
  }