Angular ViewChild 自定义排序选择器 [英] Angular ViewChild custom sort selector

问题描述

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

I'm learning about angular ViewChild currently, but I seem to be missing something when using ViewChild to select custom reference variables from the DOM.

在我的模板中，我有两个表:

In my template I have two tables:

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

我正在尝试针对每个对象进行排序:

I am attempting to target them with a sort for each:

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

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

Then I attempt to initiate them in ngAfterViewInit():

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

当我单击标题对每一列进行排序时，结果是任何一张表都没有任何反应.我确信我在这里忽略了一些简单的东西，但我看不到它是什么.如何使这些表中的每一个都相互独立排序?

The result is nothing happens on either table when I click the headers to sort each column. I'm sure there is something simple I am overlooking here but I can't see what it is. How can I make each of these tables sort independently of each other?

推荐答案

我一直在尝试关注 this 问题要派生和回答，但对我来说没有意义.所以我深入到 debugger 并找到了我的问题的答案.

I had been attempting to follow this question to derive and answer but it wasn't making sense to me. So I dove into a debugger and found an answer to my question.

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

When declaring a reference variable (#eventTable and #eventDateTable) you are creating a reference to the element/component/directive that you have declared it on. In my example I was creating a reference to each <mat-table> I had created. I was then attempting to assign these tables themselves to the eventTableSort and eventDateTableSort values. In ngAfterViewInit() I was essentially saying to set the sort for each dataset equal to the table it's stored in.

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

The correct way to go about targeting the MatSort for each table is to declare it when setting your reference variables. Rather than #eventTable which will create a reference for the whole table, #eventTable="matSort" will create a reference directly to that table's MatSort object. Then in your component you can use a ViewChild to target the MatSort itself.

以下是我在上面编写的相同代码，现在可以正常工作了:

Here are the same code I have written above now working correctly:

<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 自定义排序选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！