如何使用 rxjs 的过滤器运算符？

Question

我有一些代码，我可以观察到。 我想将数组过滤方法更改为过滤 rxjs。 如何使用 rxjs 的过滤器运算符？

@Input() public articleTags: Observable<ALArticleTag[]>;
public selectedArticleTags: ALArticleTag[] = [];
public ngAfterViewInit(): void {
        this.articleTags.pipe(
            take(1),
            map(tags =>  {
                return this.selectedArticleTags = this.article.tagIds ? tags.filter(tag => {
                    return this.article.tagIds.includes(tag.id);
                }) : [];
            }),
        ).subscribe(response => {
            this.selectedArticleTags = response;
            this.changeDetection.markForCheck();
        });
    }

Answer 1

请注意，RxJS 的过滤器运算符与 JavaScript 的原生Array.filter()方法完全不同。

RxJS 的过滤器操作符允许你

通过仅发出满足指定谓词的项来过滤源 Observable 发出的项。

换句话说，RxJS filter算子从 stream 中排除了满足一定条件的 observable，这与Array.filter()所做的完全不同，后者是根据特定条件从数组中过滤/删除对象或值。

例如，下面的序列使用 RxJS filter()运算符过滤掉长度小于 1 的tags 。

this.articleTags
  .pipe(
    filter(tags => tags.length > 1),
  ).subscribe(res => {
    console.log(res);
    // do the rest
  })

因此，当返回可观察值时，生成的 output 将是长度大于 1 的articleTags 。

因此，我认为您不应该使用 RxJS filter运算符来替换map()运算符中的过滤操作。

Answer 2

据我所知，如果满足此条件，您想过滤标签this.selectedArticleTags = this.article.tagIds ，然后按此条件过滤数组tags.filter(tag => this.article.tagIds.includes(tag .id)) .

代码应如下所示：

@Input() public articleTags: Observable<ALArticleTag[]>;
public selectedArticleTags: ALArticleTag[] = [];
public ngAfterViewInit(): void {
        this.articleTags.pipe(
            take(1),
            filter(tags => this.selectedArticleTags = this.article.tagIds),
            map(tags => tags.filter(tag => this.article.tagIds.includes(tag.id));
            }),
        ).subscribe(response => {
            this.selectedArticleTags = response;
            this.changeDetection.markForCheck();
        });
    }