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$可观察数组包含所有需要的值

这里是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'
})

With`;

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'))

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

1 个答案: