アンギュラマテリアル複数のテーブルで異なるマットソート

Question

Augularの複数のマテリアルテーブルで別々の/別個のページ設定に問題はありません。しかし、ページ上の別々のテーブルをソートするのはそれほどシンプルではありません。

Material Angular（ver 4-5）テーブルコンポーネントを使用して、複数のテーブルソートの実際の例を教えてください。

が長く、検索した後あなた

Answer 1

をありがとう、私は最終的にあなたの問題を解決だけでなく、私は特定の部分を発見した場所へのフル解像度やリンクを発見しました。最終的に私のために働いているように、うまくいけば、これはあなたのために働く。

import { Component, AfterViewInit, ViewChild, ChangeDetectorRef } from '@angular/core'; 
 
import { MatSort, MatTableDataSource } from '@angular/material'; 
 

 
@Component({ 
 
    templateUrl: './my-tables.component.html' 
 
}) 
 
export class CopyInstructionsComponent implements AfterViewInit { 
 
    public myFirstTableData: MatTableDataSource<MyTableModel>; 
 
    public mySecondTableData: MatTableDataSource<MyTableModel>; 
 
    @ViewChild('firstTableSort') public firstTableSort: MatSort; 
 
    @ViewChild('secondTableSort') public secondTableSort: MatSort; 
 
    
 
    constructor(private cdRef: ChangeDetectorRef) { 
 
    // ...the rest of your code here to build the data structures. 
 
    } 
 
    
 
    ngAfterViewInit() { 
 
    this.myFirstTableData.sort = this.firstTableSort; 
 
    this.mySecondTableData.sort = this.secondTableSort; 
 
    // See => https://stackoverflow.com/questions/39787038/how-to-manage-angular2-expression-has-changed-after-it-was-checked-exception-w 
 
    this.cdRef.detectChanges() 
 
    } 
 
}

<mat-table 
 
    #firstTable 
 
    #firstTableSort="matSort" 
 
    [dataSource]="myFirstTableData" 
 
    matSort 
 
> 
 
    <ng-container matColumnDef="column1"> 
 
    <mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell> 
 
    <mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell> 
 
    </ng-container> 
 
</mat-table> 
 

 
<mat-table 
 
    #secondTable 
 
    #secondTableSort="matSort" 
 
    [dataSource]="mySecondTableData" 
 
    matSort 
 
> 
 
    <ng-container matColumnDef="column1"> 
 
    <mat-header-cell *matHeaderCellDef mat-sort-header>Column 1</mat-header-cell> 
 
    <mat-cell *matCellDef="let row">{{ row.column1 }}</mat-cell> 
 
    </ng-container> 
 
</mat-table>