多张桌子上的角度材料不同的垫子排序 [英] Angular Material distinct mat-sort on multiple tables

问题描述

在 Augular 中的多个 Material 表上单独/不同的分页没有问题.但是在页面上对单独的表格进行排序并不像看起来那么简单.

No problem with separate/distinct pagination on multiple Material tables in Augular. But sorting separate tables on a page is not as simple it seems.

有人可以给我们指出一个使用 Material Angular(版本 4-5)表格组件进行多表格排序的工作示例.

Can someone please point us to a working example of multiple table sorting using the Material Angular (ver 4-5) table component.

谢谢

推荐答案

经过长时间的搜索，我终于找到了您的问题的解决方案，以及完整的解决方案以及指向我找到某些部分的位置的链接.希望这对你有用，因为它终于对我有用了.

After a long search, I finally found the resolution to your issue, as well as the full resolution and link to where I found certain pieces. Hopefully this works for you, as it is finally working for me.

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>

这篇关于多张桌子上的角度材料不同的垫子排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！