通过更改 .filteredData 属性来更新 mat-table 内容答案

【问题标题】：Update mat-table contents by changing .filteredData property通过更改 .filteredData 属性来更新 mat-table 内容
【发布时间】：2018-06-18 09:07:33
【问题描述】：

更新：$scope.$apply();似乎是正确的方法，但我正在使用 Angular6...我将如何实现相同的功能？

我目前正在尝试以特定方式更新表格。我不希望通过.filter 属性、自定义管道等来实现这一点，而是希望将我希望显示的数据直接分配给dataSource 的属性。

我尝试将dataSource.filteredData 分配给我希望显示的数据。但是，即使dataSource.filteredData 更新，该表也无法反映此类更改。

我是否更改了正确的变量？如何通过直接编辑dataSource 的属性（即通过.filteredData）来更新可查看的表格内容？

希望这是有道理的，如果没有，请询问！

【问题讨论】：

你能贴出你的代码吗？也是angular还是angularjs？

标签： angular typescript

【解决方案1】：

如果问题是关于 angularjs，我建议您使用 $scope.$apply() 这将强制更新手表和摘要周期。

将数据设置为 dataSource.filteredData 后，调用 $scope.$apply();

编辑：

由于您将 angular 与 typescript 一起使用，因此您可以对 detectChanges()

执行相同的操作

一旦你分配了数据就调用，

chRef.detectChanges();

你可以看我的回答here

【讨论】：

抱歉，这是一个在 typescript 上运行的 Angular CLI 项目 - 我可以用这个设置做一些类似于你的建议的事情吗？
@J.Tey 你可以使用stackoverflow.com/questions/48186828/…
这有助于解决您的问题吗？
太棒了！很高兴为您提供帮助！
嗨。我也尝试在我的过滤器函数中遵循相同的操作，该函数在 MatTableDataSource 的过滤数据中设置数据，但它不会更新视图。我调试了，数据就在那里。我基本上操纵了已经过滤的数据，这是我的主要场景。提前致谢。我正在使用带有 Typescript 的 Angular。

【解决方案2】：

根据我在 Angular 2+ 中搜索到的等同于 $scope.$apply() 的内容，它是这样的：

import { ChangeDetectorRef } from 'angular/core';

constructor(private chRef: ChangeDetectorRef){
}

然后使用：

chRef.detectChanges(); // whenever you need to force update view

使用dataSource.filteredData设置数据后。

【讨论】：