Angular Material不同的mat-sort在多个表上

Question

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

有人可以指出我们使用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>

Answer 2

在我的头撞墙几个小时后，我终于设法完成了这项工作。

使用 Angular v.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;

我希望这个答案对某人有所帮助。

编辑：该解决方案也适用于 Angular 9 和 10。

Answer 3

这是针对多个表进行排序的Angular 6工作解决方案：

import { MatSort, MatTableDataSource } from '@angular/material';

...

@ViewChild('sortCol1') sortCol1: MatSort;
@ViewChild('sortCol2') sortCol2: MatSort;

...

资料来源1：

this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;

资料来源2：

this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;

...

表1（视图）：

<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

表2（视图）：

<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

Answer 4

这是我使用 @ViewChildren 属性装饰器的解决方案。确保表的顺序与 QueryList 中的顺序匹配。

"@angular/material": "^7.3.7"

import { MatSort, MatTableDataSource } from '@angular/material';

sortList: QueryList<MatSort>;
@ViewChildren(MatSort) set matSort(ms: QueryList<MatSort>) {
    this.sortList = ms;
    if (this.dataSource1) {
      this.dataSource1.sort = this.sortList.toArray()[0];
    }
    if (this.dataSource2) {
      this.dataSource2.sort = this.sortList.toArray()[1];
    }
    if (this.dataSource3) {
      this.dataSource3.sort = this.sortList.toArray()[2];
    }
}

在 ngOnInit() 中设置 MatTableDataSource：

this.datSource1 = new MatTableDataSource(this.userData1);
this.dataSource2 = new MatTableDataSource(this.userData2);
this.dataSource3 = new MatTableDataSource(this.userData3);

HTML（简化）

<mat-table [dataSource]="dataSource1" matSort>
  <ng-container matColumnDef="name">
    <mat-header-cell mat-sort-header *matHeaderCellDef>Name</mat-header-cell>
    ...
  </ng-container>
</mat-table>
<mat-table [dataSource]="dataSource2" matSort>...</mat-table>
<mat-table [dataSource]="dataSource3" matSort>...</mat-table>