我试图在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>
答案 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设置为响应,我收到了一个未定义的错误。然而,通过此修复,导致信息最终正确显示。
感谢大家的帮助!