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

【问题标题】：How can I use filter operator of rxjs?如何使用 rxjs 的过滤器运算符？
【发布时间】：2023-03-10 19:47:01
【问题描述】：

我有一些代码，我可以在其中观察到。我想将数组过滤方法更改为过滤 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();
        });
    }

【问题讨论】：

为什么要改成rxjs的filter？
因为这是我老板的建议，我必须执行它
rxjs filter 过滤源 Observable 发出的项目，而数组 filter 过滤数组中的元素，两个不同的东西。您可以将articleTags 制作成Observable<ALArticleTag>（不是数组）并在源处为每个标签发出而不是发出一个数组，但是您也必须删除take(1)
一开始你为什么要做take(1)？ articleTags 是否发出多个值？使用该组件的组件中articleTags是如何定义的？
@prolina 有办法做到这一点，但我严重怀疑在这种情况下你是否需要它。告诉你的老板 rxjs filter 在这里并没有带来任何好处，只会让实现变得不那么直观

标签： angular rxjs observable

【解决方案1】：

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

RxJS 的过滤器操作符允许你

过滤源 Observable 发出的项目，只发射那些满足指定谓词。

也就是说，RxJS filter 操作符从流中排除了满足一定条件的 observable，这与 Array.filter() 所做的有很大不同，后者是根据一个一定的条件。

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

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

因此，返回可观察值时的结果输出将是长度大于 1 的articleTags。

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

【讨论】：

【解决方案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();
        });
    }

【讨论】：