Невозможно реализовать сортировку и разбиение на страницы в Angular 7, несколько таблиц

Question

Невозможно реализовать сортировку и разбиение на страницы в Angular 7, в мат-аккордеонах (mat-extension-panel), где у каждого из них есть таблица матов с независимыми источниками данных. Сортировка и разбиение на страницы, которые довольно просты в реализации, в то время как для одного стола, создают проблемы, когда я пытаюсь сделать это из мата-гармошки с несколькими панелями расширения матов.

Я пробовал этот метод (https://stackblitz.com/edit/data-table-multiple-data-source)), но не могу изменить тип представления в коде, поэтому раскрывающиеся списки должны остаться.

<div class="grid-container">
    <div class="grid-list">
        <mat-accordion class="expand-panel">
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Case Document
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <button class="add-button" mat-mini-fab matTooltip="Add Document" style="float: right">
                    <mat-icon class="add" (click)="addPopup('documentUpload')">add</mat-icon>
                </button>
                <table mat-table [dataSource]="documentDataSource" matSort>
                    <ng-container matColumnDef="document-name">
                        <th class="header" mat-header-cell *matHeaderCellDef mat-sort-header>Document Name</th>
                        <td mat-cell *matCellDef="let document">{{document?.name}}</td>
                    </ng-container>
                    <ng-container matColumnDef="document-category">
                        <th class="header" mat-header-cell *matHeaderCellDef mat-sort-header>Category</th>
                        <td mat-cell *matCellDef="let document">{{document?.category}}</td>
                    </ng-container>
                    <ng-container matColumnDef="document-date">
                        <th class="header" mat-header-cell *matHeaderCellDef mat-sort-header>Date Uploaded</th>
                        <td mat-cell *matCellDef="let document">{{document?.createdDate}}</td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="documentTableColumns"></tr>
                    <tr mat-row *matRowDef="let document; columns: documentTableColumns"></tr>
                </table>
                <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
            </mat-expansion-panel>
        </mat-accordion>

    </div>
    <div class="grid-list">
        <mat-accordion class="expand-panel">
            <mat-expansion-panel>
                <mat-expansion-panel-header>
                    <mat-panel-title>
                        Case History
                    </mat-panel-title>
                </mat-expansion-panel-header>
                <table mat-table #historySort="matSort" [dataSource]="caseHistoryDataSource"
                    matSort>
                    <ng-container matColumnDef="type">
                        <th class="header" mat-header-cell mat-sort-header *matHeaderCellDef>Action</th>
                        <td mat-cell *matCellDef="let history">{{history?.type}}</td>
                    </ng-container>
                    <ng-container matColumnDef="key">
                        <th class="header" mat-header-cell mat-sort-header *matHeaderCellDef>Case Property</th>
                        <td mat-cell *matCellDef="let history">{{history?.key}}</td>
                    </ng-container>
                    <ng-container matColumnDef="valueName">
                        <th class="header" mat-header-cell mat-sort-header *matHeaderCellDef>Revised Value</th>
                        <td mat-cell *matCellDef="let history">{{history?.valueName}}</td>
                    </ng-container>
                    <ng-container matColumnDef="oldValueName">
                        <th class="header" mat-header-cell mat-sort-header *matHeaderCellDef>Previous Value</th>
                        <td mat-cell *matCellDef="let history">{{history?.oldValueName}}</td>
                    </ng-container>
                    <ng-container matColumnDef="createdDate">
                        <th class="header" mat-header-cell mat-sort-header *matHeaderCellDef>Date and Time</th>
                        <td mat-cell *matCellDef="let history">{{history?.createdDate | date: 'short'}}</td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="historyTableColumns"></tr>
                    <tr mat-row *matRowDef="let history; columns: historyTableColumns"></tr>
                </table>
                <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
            </mat-expansion-panel>
        </mat-accordion>
    </div>
<div>

А вот и реализация файла .ts.

  @ViewChild(MatPaginator) historyPaginator: MatPaginator;
  @ViewChild(MatSort) historySort: MatSort;

  @ViewChild(MatPaginator) documentPaginator: MatPaginator;
  @ViewChild(MatSort) documentSort: MatSort;
async ngAfterViewInit() {

    this.caseHistoryDataSource.paginator = this.historyPaginator;
    this.caseHistoryDataSource.sort = this.historySort;

    this.documentDataSource.paginator = this.documentPaginator;
    this.documentDataSource.sort = this.documentSort;
}

Данные видны и отображаются правильно, но разбиение на страницы и сортировка не работают.

Answer 1

Вы должны связать свою нумерацию страниц и отсортировать, как только вы загрузите данные, такие как ..

this.caseHistoryDataSource=new MatTableDataSource<any>(data);
this.caseHistoryDataSource.paginator = this.historyPaginator;
this.caseHistoryDataSource.sort = this.historySort;