Angular4：在異步調用服務器之後更新組件視圖

在ngOnInit生命週期鉤子期間進行服務調用後，我試圖更新組件的視圖。我訂閱服務方法，然後在訂閱方法中，遍歷響應以創建一個ToDo對象，然後將其推送到列表中。但是，執行此操作後，看起來todoList從不更新。有任何想法嗎？Angular4：在異步調用服務器之後更新組件視圖

下面是部分打字稿代碼：

export class CanvasComponent implements OnInit{ 
todo: ToDo; 
todoList: ToDo[] = []; 
tasks: Task[]; 

errorMessage: string; 

constructor(public taskService: TaskService) { 

} 
ngOnInit(){ 
    // this.todo = new ToDo(0, 'placeholder', false, 'Please Implement custom components!'); 
    // this.newTodo = new ToDo(0, 'placeZholder', false, 'Please Implement custom components!'); 
    this.taskService.GetAll() 
     .subscribe(response => { 
      this.todoList = response; 
     ) 
    }

..和我的組件視圖打印此塊中的信息：

<div class="row"> 
    <div *ngFor="let todo of todoList"> 
     {{todo.title}} 
     {{todo.description}} 
    </div> 
</div>

來源

2017-09-15 Justlegos

聽起來像'taskService.GetAll（）'調用了一些非Angular代碼。你能否加上這個代碼以及你的問題？另見https://stackoverflow.com/questions/36919399/angular-2-view-not-updating-after-model-changes/36919459#36919459。在你的情況''zone.run（）'可能是一個好主意，但它應該儘可能接近離開Angulars區域的代碼，而不是隨機的位置，這會破壞你的應用程序。 –

好吧，事實證明，在我的服務中，我的GetAll（）方法，我忘了調用response.json（）後調用「.data」屬性。

所以這是我本來有：

return this.http.get(this.url) 
     .map(response => { 
      this.tasks = response.json(); 
      return this.tasks; 
});

哪裏有什麼固定的問題被添加。數據屬性在這裏：

return this.http.get(this.url) 
     .map(response => { 
      this.tasks = response.json().data; 
      return this.tasks; 
});

其結果是，當我嘗試執行我的訂閱方法，其中我將todoList設置爲響應，我收到了一個未定義的錯誤。但是，這樣做會導致信息最終正確顯示。

感謝大家的幫助！

來源

2017-09-17 21:55:50 Justlegos

嘗試調用得到所有方法在構造水平

constructor(public taskService: TaskService) { 
    this.taskService.GetAll(); 
}

來源

2017-09-15 06:43:37

我不知道你的Todo/Task對象是如何構建的，但是這裏是這個 Plunker所以我希望它可以幫助你，我儘量做到與你的代碼類似。仔細檢查你的getAll（）方法和你的服務返回的是什麼。

您可能想要返回類似Observable<Task[]>或任何您想返回的內容。希望它可以幫助你

來源

2017-09-15 13:35:03

Angular4：在異步調用服務器之後更新組件視圖

回答

相關問題