2

我目前正在学习角度 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;

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

4

1 回答 1

1

我一直试图按照这个问题来推导和回答，但这对我来说没有意义。所以我深入debugger研究并找到了我的问题的答案。

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

为每个表定位的正确方法MatSort是在设置参考变量时声明它。而不是#eventTable为整个表#eventTable="matSort"创建引用，而是直接创建对该表的 MatSort 对象的引用。然后在您的组件中，您可以使用 aViewChild来定位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;
于 2018-01-23T17:06:23.010 回答