mat-filtering / mat-sort не работает правильно при использовании ngif в родительской таблице mat

Question

Обратите внимание, что разбиение на страницы / сортировка работает неправильно.Пейджинг не показывает количество отображаемых элементов, а сортировка не работает, но если вы удалите строку в html-файле * ngIf = "dataSource? .FilteredData.length> 0" , ошибка исправлена,Если вы используете фильтрацию, она работает, но не показывает сумму фильтра

Проверьте пример.

https://stackblitz.com/edit/angular-wqkekh-nm3pn2?file=app/table-pagination-example.html

Answer 1

Добавив тег <tr> в ваш HTML-код и добавив mat-sort-header="fieldname", вы можете получить разрешение.

Answer 2

В ваших component.ts замените этот код

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

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

следующим:

  private paginator: MatPaginator;
  private sort: MatSort;


  @ViewChild(MatSort) set matSort(ms: MatSort) {
    this.sort = ms;
    this.setDataSourceAttributes();
  }

  @ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
    this.paginator = mp;
    this.setDataSourceAttributes();
  }

  setDataSourceAttributes() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

И в вашем html:

    <mat-card *ngIf="!dataSource?.filteredData.length" style="margin-bottom: 5px">
        <div><span>ZERO RESULT</span></div>
    </mat-card>

    <mat-card *ngIf="dataSource?.filteredData.length">
    ** insert the table code that you have **
    </mat-card>