Angular ViewChild 自定义排序选择器答案

【问题标题】：Angular ViewChild custom sort selectorAngular ViewChild 自定义排序选择器
【发布时间】：2018-07-02 11:43:30
【问题描述】：

我目前正在学习角度 ViewChild，但在使用 ViewChild 从 DOM 中选择自定义引用变量时，我似乎遗漏了一些东西。

在我的模板中有两个表格：

<mat-table #eventTable [dataSource]="eventDataSource" matSort>
<mat-table #eventDateTable [dataSource]="dateEventDataSource" matSort>

我正在尝试对它们进行排序：

@ViewChild('eventTable') eventTableSort: MatSort;
@ViewChild('eventDateTable') eventDateTableSort: MatSort;

然后我尝试在ngAfterViewInit() 中启动它们：

this.eventDataSource.sort = this.eventTableSort;
this.dateEventDataSource.sort = this.eventDateTableSort;

当我单击标题对每一列进行排序时，结果是任何一个表都没有发生任何事情。我确定我在这里忽略了一些简单的东西，但我看不到它是什么。如何使这些表中的每一个彼此独立排序？

【问题讨论】：

你确定你是在处理 angularjs 而不是 angular 和 angular-material 和 angular-material2 吗？您的代码看起来像 angular 构造（当前版本 5.x）
@bhantol 哎呀我使用了错误的标签，现在已修复。谢谢！

标签： angular sorting angular-material2 viewchild

【解决方案1】：

我一直试图关注this 的问题来推导和回答，但这对我来说没有意义。所以我潜入debugger 并找到了我的问题的答案。

在声明引用变量（#eventTable 和 #eventDateTable）时，您正在创建对已声明它的元素/组件/指令的引用。在我的示例中，我创建了对我创建的每个 <mat-table> 的引用。然后我试图将这些表本身分配给eventTableSort 和eventDateTableSort 值。在ngAfterViewInit() 中，我实质上是说将每个数据集的排序设置为与其存储的表相同。

为每个表定位MatSort 的正确方法是在设置引用变量时声明它。 #eventTable 不会为整个表创建引用，#eventTable="matSort" 将直接创建对该表的 MatSort 对象的引用。然后在您的组件中，您可以使用ViewChild 来定位MatSort 本身。

我上面写的代码现在可以正常工作了：

<mat-table #eventTable="matSort" [dataSource]="eventDataSource" matSort>
<mat-table #eventDateTable="matSort" [dataSource]="dateEventDataSource" matSort>

@ViewChild('eventTable') eventTableSort: MatSort;
@ViewChild('eventDateTable') eventDateTableSort: MatSort;

this.eventDataSource.sort = this.eventTableSort;
this.dateEventDataSource.sort = this.eventDateTableSort;

【讨论】：