각도 재질 다중 테이블의 매트 정렬

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>