Angular：异步调用服务器后更新组件视图答案

【问题标题】：Angular4: Update Component View after Async Call to ServerAngular：异步调用服务器后更新组件视图
【发布时间】：2018-02-24 06:08:54
【问题描述】：

在 ngOnInit 生命周期挂钩期间进行服务调用后，我试图更新组件的视图。我订阅了 service 方法，然后在订阅方法中，遍历响应以创建一个 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>

【问题讨论】：

听起来像 taskService.GetAll() 调用了一些非 Angular 代码。您能否将此代码也添加到您的问题中？另见stackoverflow.com/questions/36919399/…。在您的情况下，zone.run() 可能是一个好主意，但最好在尽可能靠近退出 Angulars 区域的代码处使用它，而不是在会破坏您的应用程序的随机位置使用。

标签： angular user-interface typescript

【解决方案1】：

尝试在构造函数级别调用get all方法

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

【讨论】：

【解决方案2】：

我不知道您的 Todo/Task 对象是如何构建的，但这里是 Plunker ，所以我希望它对您有所帮助，我尝试尽可能与您的代码相似。仔细检查您从 getAll() 方法和服务返回的内容。

您可能想要返回 Observable<Task[]> 之类的内容，或者您想要返回的任何内容。希望对你有帮助

【讨论】：

【解决方案3】：

好吧，在我的服务中的 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;
});

因此，当我尝试执行我的订阅方法时，我将 todoList 设置为响应，我收到了一个未定义的错误。然而，修复此问题后，信息最终会正确显示。

感谢大家的帮助！

【讨论】：