Question

我正在使用Angular Material和Angular 7。

我有一个自定义的默认数据表组件，因此不必在每个表实现中都重写所有代码。直到我决定实现使用@Input（）属性从外部分配过滤器的可能性，这样我才能自由移动过滤器输入框。

我这样设置：

  @Input()
  set externalFilterValue(value: string) {
    if (value != null && value != '') {
      this._externalFilterValue = value;
      this.ngOnChanges();
      this.applyFilter(this._externalFilterValue);
    }
  }

这就是我的applyFilter方法：

  applyFilter(filterValue: string) {
    if (filterValue != null && filterValue != '') {
      this._externalFilterValue = filterValue.trim().toLowerCase();

      this.dataSource.filter = this._externalFilterValue;
      if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
      }
    }
  }

据说一切正常，但是当为dataSource.filter分配任何东西时，数据表仍显示先前的数据。

标记看起来像这样：

  <mat-form-field *ngIf="!hideFilter" style="width:100%;">
    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter" autocomplete="off">
  </mat-form-field>

  <table matSort mat-table #table [dataSource]="dataSource" (matSortChange)="sortData($event)" style="width:100%">
    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
      <div *ngIf="column.columnDef !== 'detailBtn'">
        <th mat-header-cell [mat-sort-header]="column.columnDef" *matHeaderCellDef > {{ column.headerCaption }} </th>
        <td td mat-cell *matCellDef="let row">
          <strong> &nbsp;{{ column.dataName(row) }}</strong>
        </td>
      </div>
      <div *ngIf="column.columnDef.indexOf('command_')">
        <th mat-header-cell *matHeaderCellDef > {{ column.headerCaption }} </th>
        <td td mat-cell *matCellDef="let row">
          <button mat-raised-button color="primary" id="column.dataName(row)" (click)="onCommandClick($event, column)">Command</button>
        </td>
      </div>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'selected': selectedRowGuid == row.guid }" (click)="selectItem($event, row)"></tr>
  </table>

您的想法？

自定义材料数据表-外部过滤器问题

0 个答案: