Angular4：异步调用服务器后更新组件视图

Question

在 ngOnInit 生命周期挂钩期间进行服务调用后，我试图更新我的组件的视图。我订阅了服务方法，然后在订阅方法中，遍历响应以创建一个 ToDo 对象，然后将其推送到列表中。但是，在执行此操作后，似乎从未更新 todoList。有任何想法吗？

这是组件打字稿代码：

    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>

Answer 1

好吧，事实证明，在我的服务的 GetAll() 方法中，我在调用 response.json() 后忘记调用“.data”属性。

所以这就是我最初拥有的：

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

解决问题的方法是在此处添加 .data 属性：

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

因此，当我尝试执行 subscribe 方法（将 todoList 设置为响应）时，出现了未定义的错误。然而，修复此问题后，信息最终可以正确显示。

感谢大家的帮助！