棱角分明的材料:加载数据时,MatTableDataSource sort.sortChange会触发错误的排序状态

时间:2020-04-15 23:27:29

标签: angular angular-material

我有一个观察数据流并对其进行过滤的组件。此过滤后的数据被设置为名为data的{​​{1}}的{​​{1}}属性,该属性用作组件MatTableDataSource的输入。 从组件的父级更新数据,并像这样检测到更改:

this.filteredData

我对表进行了排序,过滤等设置,它可以毫无问题地订阅更新。

组件中的

MatTable提供/** `this.dataSource` in this case is another MatTableDataSource */ this.dataSource.connect().subscribe( () => { this.filterData(); // sets the value of this.filteredData.data } ); ,用作@ViewChild (MatSort ...)...的{​​{1}}属性。

我有一个来自组件的this.sort,它发出表的当前this.filteredData状态,即,如果用户单击列并更改排序方式,则使用

sort

在组件的@Output中。

目标是可以在组件外部传递排序设置。

这是我无法解决的一种错误:

在初始化后更新Sort时,this.filteredDataSource.sort.sortChange.subscribe( sort => { this.sortChanged.emit( sort ); } ); 发出ngAfterViewInit()表示其不存在的排序状态(似乎是this.filteredData.data的方向第一列/属性)。父组件收到此错误状态,这意味着如果将其保存并在以后使用,则它是错误的。即使在更新后将正确保存的this.sort状态应用于sortChange的情况下,也会发送此asc,除非我使用某种超时,这似乎很麻烦。

模拟流量:

sortChange

然后Sort事件发射器发出:

this.filteredData

(在这种情况下,this.filteredDataSource.data = this.dataSource.data.concat(); this.filterForms.forEach( filterForm => { ... //(apply filtering based on the form's selection) this.filteredDataSource.data = this.filteredDataSource.data.filter(...) } ); const sort = ( { id: `date`, start: `desc` } ) as MatSortable; this.sort.sort( sort ); 是表的第一列)

代码中没有任何东西可以发出第二个sortChange。 Angular是否由于加载标题行或其他内容而发出此信息?我无法解决这个问题。

0 个答案:

没有答案