RxJS take 运算符不与 Angular 应用程序一起使用答案

【问题标题】：RxJS take operator not working with Angular appRxJS take 运算符不与 Angular 应用程序一起使用
【发布时间】：2019-01-25 19:18:27
【问题描述】：

我有一个解析器，它从服务中获取数据并将 Observable 对象传递给订阅和实现解析器的组件。

resolve (route: ActivatedRouteSnapshot): Observable<NewsAPIArticle[]> {
    return this.newsAPIService.getNewsAPIArticles()
        .pipe(
            catchError(error => {
                this.alertify.error('Problem retrieving news');
                return of(null);
            }),
            take(5)
        );
}

在组件的ngOnInit中，我获取数据，保存到本地数组，控制台记录数组。

ngOnInit() {
    this.router.data.subscribe(data => {
      this.articles = data['news']['articles'];
      console.log(this.articles);
      this.language = 'en';
    });
  }

但是，正如我理解的那样，解析器应该从可观察对象中“获取”5 个东西，而不是控制台记录 5 个东西，而是该数组返回 20 个对象。我在 take rxjs 运算符中做错了什么？我不想要全部 20 条回复，可能只有 5 条。

【问题讨论】：

this.newsAPIService.getNewsAPIArticles().pipe(switchMap(r => r), take(5))

标签： angular rxjs

【解决方案1】：

take(5) 表示它将从流中获取 5 个项目。该数组是流中的单个项目，因为 observable 的类型为NewsAPIArticle[]。如果 observable 的类型是 NewsAPIArticle，并且流发出了多篇文章，take(5) 的行为会如您所愿，但实际上，您调用的服务会同时发出所有文章。

【讨论】：

哦，我明白了。所以“take”正在考虑将这个巨大的数组作为从 observable 返回的一个项目，所以甚至没有 5 个可以“take”。
没错。你明白了。

【解决方案2】：

你应该使用带切片的地图，

 .pipe(...
   map(x => x.slice(0,5))
 )

【讨论】：

感谢您在此处建议仅使用 slicke。我不确定在管道函数中使用它，也许有办法让它工作，但对我来说，我需要简单地使用 slice 作为订阅响应的一部分，如下所示： .subscribe( (x) = > { this.studentData = x.slice(0, 5); },
** 显然只是在这里使用'slice'**