Angular：为什么排序仅适用于第一个Mat Table？

Question

为什么在此处公布排序功能：https://material.angular.io/components/table/overview#sorting

一旦添加第二个表格以显示数据的后半部分，

就会失败？ ：

https://stackblitz.com/edit/angular-1vg9gn-q1back?file=app/table-basic-example.ts

我该如何解决？

Answer 1

在您的代码中，您要为您的数据源分配MatSort的实例。 sort成员将是角度可以在模板中找到的MatSort指令的第一个实例。

@ViewChild(MatSort) sort: MatSort; //1st sort directive

ngOnInit() {
  this.dataSource.sort = this.sort;
}

由于您在两个表之间共享数据源，因此只使用第一个数据源。

您不能在表中进行数据源共享，以便进行排序，过滤等操作。

解决方案是每个表有一个数据源。

Answer 2

材料已经为粘贴标题提供了自己的支持，理论上它应该在发布后解决我的问题：https://github.com/angular/material2/pull/11483