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屋!