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

时间:2017-09-15 06:22:02

标签: angular user-interface typescript

我试图在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>

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

我不知道你的Todo / Task对象是如何构建的,但是这里 Plunker 所以我希望它对你有帮助,我试着尽可能地与你的代码类似。仔细检查你从getAll()方法和服务返回什么。

你可能想要返回Observable<Task[]>之类的东西,或者你想要返回的东西。希望它能帮到你

答案 2 :(得分:0)

好吧,从我的服务中我的GetAll()方法结果证明,我忘了打电话给&#34; .data&#34;在我调用response.json()之后的属性。

所以这就是我最初的所作所为:

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设置为响应,我收到了一个未定义的错误。然而,通过此修复,导致信息最终正确显示。

感谢大家的帮助!