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

问题描述

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

推荐答案

我一直在尝试遵循

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)时，您将创建对声明了它的元素/组件/指令的引用.在我的示例中，我正在创建对我创建的每个<mat-table>的引用.然后，我试图将这些表本身分配给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="matSort"会直接创建对该表的MatSort对象的引用，而不是#eventTable会为整个表创建引用.然后，您可以在组件中使用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屋！