过滤一个可观察的数组答案

【问题标题】：Filter an observable array过滤一个可观察的数组
【发布时间】：2020-01-23 11:09:16
【问题描述】：

我是 rxjs 运算符的新手，我尝试简化我的代码。当状态发生变化（ currentstate ）时，我想过滤具有此特定状态的项目列表并限制为 10 个项目。

这是我的代码：

    this.currentState$
      .pipe(
        take(1),
        switchMap(state => {
          this.state = state;
          return this.projects$;
        }),
        takeWhile(_ => this.alive),
        filter(projects => !!projects.length),
        map(projects => {
          console.log('------------------MAP------------');
          return projects.filter((project: Project, index: number) => project.state === this.state.id && index < this.count);
        }))
      .subscribe(projects => this.filteredProjects = projects);

我试图简化并返回一个 observable，但看起来 Switchmap 日志被调用了 3 次，我不明白为什么。正常吗？

这里是代码：

    return this.currentState$
      .pipe(
        take(1),
        switchMap(state => {
          console.log('----SWITCHMAP-----');
          this.state = state;
          return this.projects$.pipe(
            filter(projects => !!projects.length),
            map(projects => projects.filter((project: Project, index: number) => project.state === this.state.id && index < this.count)));
        }));

其他问题：我想加载更多项目可以轻松完成吗？我想我需要首先按状态创建一个可观察的过滤器。如果状态发生变化，我有新的列表。每次点击后，我都会创建一个其他可观察对象，列表限制项目数？

感谢您的帮助

【问题讨论】：

标签： angular rxjs

【解决方案1】：

这是我的解决方案：

  private filterProjects() {
    return this.currentState$.pipe(
      switchMap(state => this.store.pipe(select(fromProject.getAllProjects),
        map(projects => projects.filter((project: Project) => project.state === state.id))
      )));
  }

  loadMore() {
    this.count += 10;
  }

【讨论】：