Question

在我的应用程序中，我有一个由数组填充的表，我在其中使用了一个过滤器。在OnInit中，调用promise来获取数据。现在的问题是刷新后，_projects（和transform的输入参数）的值是未定义的，表中没有显示任何内容。单击下拉列表时，将触发转换函数并填充表格。在promise中定义了_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

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

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

＆＃13;

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

＆＃13;

<tr title="{{ project.INFO }}" *ngFor="let project of (_projects | async) | projectFilter: filtered">

＆＃13;

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

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

1 个答案: