使用 promise 中的数据刷新页面后触发 Angular 2 管道

Question

在我的应用程序中，我有一个 table，它由一个数组填充，我在其中使用了一个过滤器。在 OnInit 中，调用一个承诺来获取数据。现在的问题是，刷新后，_projects 的值（以及 transform 的输入参数）未定义，table 中没有显示任何内容。当我单击下拉菜单时，将触发转换功能并填充 table。当 promise 中定义了 _projects 时，有没有办法触发管道？我也试过 pure/impure 管道。

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">

Angular 管道：

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

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

设置 _.projects 的新值后，您可以手动调用 Angular 以触发更改检测，如所述。虽然这当然是最容易实现的，但它需要您的浏览器进行更多的计算，并且可能会导致应用程序变慢。
您可以重构您的代码，使 _.projects 本身就是一个承诺，然后使用 Angular async pipe 来处理更新。这也相对容易，并且在 Angular 端的资源密集度较低：

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">

Promises，总的来说，不是处理反应性数据的最佳选择，因为在它们 resolve 之后，就不能再更新数据了。虽然这比这块代码需要更多的重构，但我会研究 RxJS - 它是一个用于创建 Observables 的库，它是反应性数据流。这对你的代码整体来说要好得多，所以如果你可以选择重构来使用 RxJS，我会的。

使用 promise 中的数据刷新页面后触发 Angular 2 管道

Trigger Angular 2 pipe after page refresh with data from promise

html

angular

typescript

promise

angular-pipe