在页面刷新后使用承诺数据触发角度2管道

Question

在我的应用程序中，我有一个由数组填充的表以及我在其上使用过滤器的表。在OnInit中，承诺被调用来获取数据。现在问题是刷新后，_projects（和transform的输入参数）的值是未定义的，表中没有显示任何内容。当我点击下拉菜单时，会触发转换函数并填充表格。在承诺中定义_projects时是否有办法触发管道？我也试过用纯净/不纯的烟斗。

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; 
} 

Answer 1

是的！有几种方法可以做到这一点 - 取决于你的用例。

1. 设定_.projects新值后，您可以进行手动呼叫角触发变化检测，所概述in this previous answer。虽然这当然是最容易实现的，但它需要浏览器部分进行更多计算，并且可能会导致应用程序速度变慢。

2. 您可以重构您的代码，以便_.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的话，我会的。