在頁面刷新後使用承諾數據觸發角度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的話，我會的。