Angular4:异步调用服务器后更新组件视图
Angular4:异步调用服务器后更新组件视图
提问于 2017-09-15 06:22:02
在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;
)
}..and my component视图使用此块打印信息：
<div class="row">
<div *ngFor="let todo of todoList">
{{todo.title}}
{{todo.description}}
</div>
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2017-09-17 21:55:50
好的，在我服务中的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设置为响应)时，我得到了一个未定义的错误。然而，在这种固定的情况下，这最终导致了信息的正确显示。
谢谢大家的帮助！
Stack Overflow用户
发布于 2017-09-15 06:43:37
尝试在构造函数级别调用get all方法
constructor(public taskService: TaskService) {
this.taskService.GetAll();
}Stack Overflow用户
发布于 2017-09-15 13:35:03
我不知道您的Todo/Task对象是如何构建的，但是这里是这个柱塞，所以我希望它能帮助您，我试着尽可能地类似于您的代码。再次检查您从getAll()方法和服务返回的内容。
您可能希望返回类似Observable<Task[]>之类的内容，或者任何您想返回的内容。希望它对你有帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46232966
复制相关文章
相似问题
腾讯云开发者
