Angular 6组件中处理Observable返回数据的遍历问题

我一眼就看出问题所在啦！你后端返回的JSON是一个外层包含posts属性的对象，但你的代码直接把整个响应赋值给了组件里的posts变量，导致它变成了对象而非数组，自然没法用*ngFor遍历。另外你的PostService里还有个小bug，得先修正。

第一步：修复服务里的循环依赖问题 #

你的PostService构造函数里错误地注入了自身，这会导致循环依赖错误，赶紧删掉这行：

// 删掉这行！
private postService: PostService

修正后的服务构造函数应该是：

constructor(
  private http: HttpClient
) { }

第二步：提取正确的文章数组 #

有两种方式可以拿到真正的文章数组，选一种你觉得顺手的就行：

方式一：在服务层处理数据（推荐） #

修改getPosts()方法，让它返回响应里的posts数组，这样组件层就不用关心后端的响应结构了：

import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators'; // 新增导入map操作符

// ...其他代码不变
getPosts(): Observable<Post[]> {
  return this.http.get<{ posts: Post[] }>(this.apiUrl).pipe(
    map(response => response.posts) // 提取posts数组
  );
}

方式二：在组件层处理数据 #

如果你不想改服务，也可以在订阅的时候直接取data.posts：

ngOnInit() {
  this.postService.getPosts()
    .subscribe(data => this.posts = data.posts); // 这里加.posts提取数组
}

验证效果 #

做完上面的修改后，this.posts就会变成真正的文章数组，你就可以正常用*ngFor遍历了：

<!-- 在post-list.component.html里这样写 -->
<div *ngFor="let post of posts">
  <h3>{{ post.title }}</h3>
  <p>作者：{{ post.name }}</p>
  <p>{{ post.post }}</p>
</div>

这时候页面上就能正确显示所有博客文章啦！

内容的提问来源于stack exchange，提问作者E. Max