在页面刷新后使用承诺数据触发角度2管道
问题描述:
在我的应用程序中,我有一个由数组填充的表以及我在其上使用过滤器的表。在OnInit中,承诺被调用来获取数据。现在问题是刷新后,_projects(和transform的输入参数)的值是未定义的,表中没有显示任何内容。当我点击下拉菜单时,会触发转换函数并填充表格。在承诺中定义_projects时是否有办法触发管道?我也试过用纯净/不纯的烟斗。在页面刷新后使用承诺数据触发角度2管道
this._projectService.getProjectsPromise().done(
function (jsdo, success, request){
that._projects = request.response[HorizonData.dsProjects][HorizonData.dsProjects][HorizonData.ttProjects];
for (let project of that._projects) {
project.WhenWhoCreatedFull = project.WhenWhoCreated
var whenwho = project.WhenWhoCreated.split(" ");
project.WhenWhoCreated = whenwho[0] + " " + whenwho[2];
}
}
)
在我component.html
<tr title="{{ project.INFO }}" *ngFor="let project of _projects | projectFilter: filtered">
角管:
transform(value: IProject[], filterBy: IProject): IProject[] {
return filterBy && value ? value.filter((project: IProject) =>
(project.projectnr.toLowerCase().indexOf(filterBy.projectnr.toLowerCase()) !== -1)
&& (project.projectname.toLowerCase().indexOf(filterBy.projectname.toLowerCase()) !== -1)
&& (project.clientnr.toLowerCase().indexOf(filterBy.clientnr.toLowerCase()) !== -1)
&& (project.clientname.toLowerCase().indexOf(filterBy.clientname.toLowerCase()) !== -1)
&& (filterBy.statusdesc.indexOf(project.statusdesc) !== -1)) : value;
}
答
是的!有几种方法可以做到这一点 - 取决于你的用例。
设定
_.projects
新值后,您可以进行手动呼叫角触发变化检测,所概述in this previous answer。虽然这当然是最容易实现的,但它需要浏览器部分进行更多计算,并且可能会导致应用程序速度变慢。您可以重构您的代码,以便
_.projects
本身就是一个承诺,然后使用Angular async pipe来处理更新。这也是比较容易的,并且具有作为对角的端更少资源密集的益处:
this._projects = this._projectService.getProjectsPromise().then(
function(jsdo, success, request) {
var projects = request.response[HorizonData.dsProjects][HorizonData.dsProjects][HorizonData.ttProjects];
for (let project of projects) {
project.WhenWhoCreatedFull = project.WhenWhoCreated
var whenwho = project.WhenWhoCreated.split(" ");
project.WhenWhoCreated = whenwho[0] + " " + whenwho[2];
}
return projects;
}
)
<tr title="{{ project.INFO }}" *ngFor="let project of (_projects | async) | projectFilter: filtered">
- 承诺,就整体而言,对于处理被动数据并不是最好的,因为在解决之后,不会再有更多的数据可以更新。虽然这需要比这一大块代码更多的重构,但我会查看RxJS - 这是一个用于创建Observables的库,它是反应性数据流。对于整个代码来说这样会好很多,所以如果你有选择重构使用RxJS的话,我会的。
thx为伟大的答案。我现在已经有了第一个选项,并使用detectChanges()实现了ChangeDetectionStrategy。为了将来的使用,我将首先看看RxJS库,但现在我已经运行了。 – NiAu