Question

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

有人可以指出我们使用Material Angular（版本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

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

“ @角度/材料”：“ ^ 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>

Answer 3

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

使用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;

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

Answer 4

这是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 5

对于Angular 8：您需要在排序名称后使用{static：true}

@ViewChild('firstTable',{static: true}) firstTable: MatSort;

Answer 6

我将第二个mat-sort放入chid组件中，并使用Angular @Input在父级和子级之间传输数据。 https://angular.io/guide/component-interaction

例如：用于订单数据的第一个mat-sort，和用于OrderDetail的第二个mat-sort。（我希望我单击该订单以展开订单明细数据的结果，并且都具有排序功能。这对我来说很奏效，希望对您有所帮助。）
在父组件中：
'<'app-sales-orderdetail [orderDetailDataInChild] =“ orderDetailDataInParent”'>''<'/ app-sales-orderdetail'>'

在子组件中：
@Input（）orderDetailDataInChild =新的MatTableDataSource（）;

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

6 个答案: