Angular4: Update Component View after Async Call to Server

Viewed 1728

I am attempting to update my component's view after a service call is made during the ngOnInit lifecycle hook. I subscribe to the service method, and then in the subscription method, iterate through the response to create a ToDo object, where I then push that to the list. However, after this has been executed, it appears that the todoList is never updated. Any ideas?

Here is the component typescript code:

    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;
        )
    }

..and my component view prints the information with this block:

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