Угловой материал 2: сортировка нескольких матовых таблиц работает только на первом столе

Question

Я использовал угловой материал в моем приложении, и у меня есть два mat-table с сортировкой по одному компоненту, но моя сортировка работает только по первой таблице

вот код ts

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;
ngAfterViewInit() {
    this.inventoryDataSource.sort = this.inventoryDataSort;
    this.inventoryDataSource.paginator = this.inventoryDataPaginator;
    this.additionalDataSource.sort = this.additionalDataSort;
    this.additionalDataSource.paginator = this.additionalDataPaginator;
}

мат-стол

<mat-table #table1 [dataSource]="inventoryDataSource" matSort>
<mat-table #table2 [dataSource]="additionalDataSource" matSort>

Answer 1

Селектор в ViewChild запрашивает DOM и находит первую математику. Не могли бы вы попробовать изменить эту часть

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild(MatSort) additionalDataSort: MatSort;
@ViewChild(MatPaginator) additionalDataPaginator: MatPaginator;

в

@ViewChild(MatSort) inventoryDataSort: MatSort;
@ViewChild(MatPaginator) inventoryDataPaginator: MatPaginator;

@ViewChild('table2', {read: MatSort}) additionalDataSort: MatSort;
@ViewChild('table2', {read: MatPaginator}) additionalDataPaginator: MatPaginator;

Answer 2

Я уже отвечал на этот вопрос в аналогичном вопросе, но опубликую его и здесь. Это может помочь другой бедной душе.

Использование Angular v.8.2.0.

Я предполагаю, что все необходимые атрибуты используются и верны (mat-sort, mat-table, [dataSource], matColumnDef, mat-sort-header, так далее).

У меня есть простой компонент с двумя сортируемыми таблицами (для краткости я опустил нерелевантный код).

Каждая из таблиц имеет уникальный атрибут ref в шаблоне. Например:

<table #table1>
<table #table2>

Затем в компоненте я использую @ViewChild декоратор для каждого из сортировщиков:

@ViewChild('table1', { read: MatSort, static: true }) sort1: MatSort;
@ViewChild('table2', { read: MatSort, static: true }) sort2: MatSort;

В readнедвижимость здесь очень важна. Не пропустите!

Затем в ngOnInit), Я назначаю сортировщики каждому источнику данных таблицы, как показано в официальных документах:

this.dataSource1.sort = this.sort1;
this.dataSource2.sort = this.sort2;