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的filter运算符与JavaScript的本机Array.filter()方法完全不同。

RxJS的过滤器运算符使您可以

过滤源发出的项目仅通过观察可观察到的项目满足指定谓词的条件。

换句话说，RxJS filter运算符从满足特定条件的流中排除可观察到的东西，这与Array.filter()所做的是相当不同的，后者是从对象中过滤/删除对象或值。一定条件下的数组。

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

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

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

因此，我认为您不应该使用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();
        });
    }

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

2 个答案: