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

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

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

Answer 2

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

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

Answer 3

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

感谢大家的帮助！

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

3 个答案: