Пользовательская таблица данных материала - проблема с внешним фильтром - PullRequest
Новая
       51

Пользовательская таблица данных материала - проблема с внешним фильтром

0 голосов
/ 28 февраля 2019

Я использую 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>

Что вы думаете?

...