Angular ViewChild 自定义排序选择器

Question

我目前正在学习 angular ViewChild，但是在使用 ViewChild 到 select 来自 DOM.

的自定义参考变量时，我似乎遗漏了一些东西

在我的模板中有两个 tables:

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

当我单击 headers 对每一列进行排序时，table 上都没有任何反应。我确定我在这里忽略了一些简单的东西，但我看不到它是什么。我怎样才能使这些 table 中的每一个相互独立排序？

Answer 1

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

当声明一个引用变量（#eventTable 和 #eventDateTable）时，您正在创建一个对您声明它的 element/component/directive 的引用。在我的示例中，我创建了对我创建的每个 <mat-table> 的引用。然后我试图将这些 table 本身分配给 eventTableSort 和 eventDateTableSort 值。在 ngAfterViewInit() 中，我基本上是说将每个数据集的排序设置为等于它存储的 table。

为每个 table 定位 MatSort 的正确方法是在设置引用变量时声明它。 #eventTable 将为整个 table 创建引用，#eventTable="matSort" 将直接创建对 table 的 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;

Angular ViewChild 自定义排序选择器

Angular ViewChild custom sort selector

angular

sorting

angular-material2

viewchild