Angular 2中Observable过滤后async pipe无法渲染的问题求助

你遇到的核心问题是用错了RxJS操作符——你现在用的filter是RxJS的流过滤操作符，它的作用是过滤Observable发出的整个数据项，而不是过滤数组内部的元素。

问题分析 #

你的comments$是一个发出评论数组的Observable（BehaviorSubject<Comment[]>），所以当你写：

this.client_comments$ = this.comments$.filter(comment => comment.commentable_type == 'Client')

这里的comment变量其实是整个评论数组，而不是数组里的单个评论对象。数组本身没有commentable_type属性，所以这个RxJS的filter会把所有发出的数组都过滤掉，导致async pipe根本拿不到可渲染的数据。你看到的嵌套Observable结构是RxJS操作符链式调用的正常表现，但这不是问题根源，真正的问题是操作符的误用。

正确解决方案 #

你需要用RxJS的map操作符，在map内部对数组进行过滤（用数组原生的filter方法），把Observable发出的原始数组转换成过滤后的子数组：

如果你用的是RxJS 5或更早版本：

this.client_comments$ = this.comments$.map(commentsArray => 
  commentsArray.filter(comment => comment.commentable_type === 'Client')
);

如果你用的是RxJS 6+（需要用pipe包裹操作符）：

首先导入map操作符：

import { map } from 'rxjs/operators';

然后修改代码：

this.client_comments$ = this.comments$.pipe(
  map(commentsArray => commentsArray.filter(comment => comment.commentable_type === 'Client'))
);

原理说明 #

• RxJS的map操作符：负责把Observable流中的每个数据项（这里就是评论数组）转换成另一个值（过滤后的评论数组）。
• 数组原生的filter方法：负责筛选数组中符合条件的单个评论对象。

这样修改后，client_comments$会发出过滤后的评论数组，async pipe订阅后会把数组展开，*ngFor就能正常循环渲染每个评论的body了。

内容的提问来源于stack exchange，提问作者Jeremy Thomas