Question

我不明白为什么我无法遍历JSON。在服务文件中，我获取JSON：

getPosts() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
}

然后在组件中使用它：

posts$: Object;

constructor(private data: DataService) { }

ngOnInit() {
    this.data.getPosts().subscribe(
      data => { 
       this.posts$ = data;
    })
}

并且我可以在我的html模板中对其进行遍历：

<li *ngFor='let post of posts$'>
    <h3>{{ post.title }}</h3>
</li>

但是我不能在组件中做类似的事情

for(let i = 0; i < this.posts$.length; i++)

结果为Property 'length' does not exist on type 'Object'.

据我所知，我不理解的错误是为什么我可以在html中对其进行迭代以及应如何在我的组件中对其进行正确编码。你能帮忙吗？

Answer 1

当您执行this.data.getPosts().subscribe()并将数据分配给this.posts$时，您正在将实际数据（帖子数组）分配给this.post $变量，这就是为什么您能够看到呈现的结果的原因。要正确地取消订阅，您可以使用异步管道。

例如： <li *ngFor='let post of (posts$|async)'> <h3>{{ post.title }}</h3> </li> 并直接分配可观察的 ngOnInit() { this.post$=this.data.getPosts(); }

提取的JSON：对象还是数组？反复

1 个答案: