如何使用 RxJS 设置 Angular 6 进度条？

Question

我正在尝试为 Angular 应用程序中完成的多个请求制作一个进度条。通过使用 forkJoin，我在没有进度条的情况下获得了多个工作请求，简而言之，我就是这样做的：

文章服务

getArticles(articleIds: Array<string>) : Observable<any[]> {
  let apiCalls = [];

  articleIds.forEach(articleId => {
    apiCalls.push(this.http.get(this.uri + '/article/' + articleId));
  });

  return forkJoin(apiCalls);
}

成分

let articleIds = ['234234', '2343334', '2354345'];

this.articleService.getArticles(articleIds).subscribe(response => {
  response.forEach(responseObj => {
    // Do stuff
  });
});

但现在我想在这个例子中做一些事情：https : //www.learnrxjs.io/recipes/progressbar.html

但我不确定如何在我的具体情况下设置它，我试过这个：

文章服务

getArticles(articleIds: Array<string>) : Observable<any[]> {
  let apiCalls = [];

  articleIds.forEach(articleId => {
    apiCalls.push(this.http.get(this.uri + '/article/' + articleId));
  });

  return from(apiCalls).pipe(concatAll());
}

但不确定如何在组件中设置它来处理进度更新，最好是在每个完成的请求上增加一个“this.progress”变量。

任何人对如何做到这一点有任何想法或指示？我应该使用“switchMapTo”吗？在服务或组件中我应该在哪里使用它？是否有另一种更好的方法来处理这个问题，我可以利用 forkJoin 来获取每个已完成请求的事件以增加进度条吗？

Answer 1

简而言之，您可以执行以下操作，使用您可以获得merge与 forkjoin 相同的效果，即全部同时运行。

this.percentage = 0
let completed = 0

merge(...apiCalls).pipe(
  tap(res=>this.percentage=(++completed/apiCalls.length))
)