在 Angular 2 中使用可观察过滤器

Question

我正在尝试过滤 Observable 并在我的视图中循环使用它，但它不会呈现。

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

comments$ 在哪里：

comments = new BehaviorSubject([]);
this.comments.next(this.client.comments) // this.client.comments is an array of comment objects
this.comments$ = this.comments.asObservable()

结果是正确的，但是当我尝试使用异步管道渲染它时，什么都没有显示：

<p *ngFor="let comment of client_comments$ | async">{{ comment.body }}</p>

在查看 devtools 中的对象后，我发现似乎有一个嵌套的 observable（2 个来源）：

client_comments$: Observable
    operator: FilterOperator {predicate: ƒ, thisArg: undefined}
    source: Observable
        source: BehaviorSubject
            ...
            value: (...)

而我的其他可观察对象具有以下结构（1 个来源）：

comments$: Observable
    operator: FilterOperator {predicate: ƒ, thisArg: undefined}
    source: BehaviorSubject
        ...
        value: (...)

有没有办法让我的 client_comments$ 在 n async 管道中工作？ 请注意client_comments$ observable 数组包含所有需要的值

这是fiddle showing the structure change you can inspect in the console

这是fiddle showing the issue with the async pipe in the view

Answer 1

我看到你没有投票给我，但你的问题是你不了解不同的数据类型。

在你的小提琴中，替换：

filteredComments$ = this.comments$.filter(function(comment) {
    comment.commentable_type == 'Client'
})

与`;

filteredComments$ = this.comments$.map(function(ARRAY) {
  return ARRAY.filter(function(comment) {
    return comment.commentable_type == 'Client'
  })
});

然后看看你自己...

原帖：

---

看起来您尝试过滤的不是发射的项目，而是要返回的发射项目 - comment => comment.commentable_type == 'Client'

所以上面的内容等价于[array of objects emitted by your subject].commentable_type == 'Client'，对于任何发射的项目来说都是不正确的。而是尝试：

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