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

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

вот тс код

@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>

angular angular-material2 angular-cdk
person Kalpesh Kashyap    schedule 07.12.2017    source источник

Ответы (2)


arrow_upward
7
arrow_downward

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

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

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

to 

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

@ViewChild('table2', {read: MatSort}) additionalDataSort: MatSort;
@ViewChild('table2', {read: MatPaginator}) additionalDataPaginator: MatPaginator;
person MRsa    schedule 07.12.2017
comment
Все еще не работает для меня. У меня есть разбиение на страницы и сортировка по всем таблицам. - person AlpeshVasani; 08.02.2018
comment
@ViewChild('table2', {читать: MatPaginator}) paginatorUpcoming: MatPaginator; @ViewChild('table3', {читать: MatPaginator}) paginatorExpired: MatPaginator; @ViewChild(MatPaginator) paginatorGym: MatPaginator; @ViewChild('table2', {читать: MatSort}) sortUpcoming: MatSort; @ViewChild('table3', {читать: MatSort}) sortExpired: MatSort; @ViewChild(MatSort) sortGym: MatSort; - person AlpeshVasani; 08.02.2018

arrow_upward
0
arrow_downward

Я уже ответил на этот вопрос в подобном вопросе, но Выложу и здесь. Это может помочь еще одной бедняжке.

Использование Angular версии 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;
person Atanas Atanasov    schedule 07.11.2019