Как настроить индикатор выполнения Angular 6 с помощью RxJS? - PullRequest
Новая
       5

Как настроить индикатор выполнения Angular 6 с помощью RxJS?

0 голосов
/ 21 сентября 2018

Я пытаюсь показать индикатор выполнения для нескольких запросов, выполненных в приложении Angular.Я получил несколько запросов для работы без индикатора выполнения с помощью forkJoin, короче говоря, вот как я сделал:

ArticleService 

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

Но я не уверен, как настроить его в моем конкретном случае, я пробовал это:

ArticleService 

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" при каждом выполненном запросе.

Anyoneесть какие-нибудь идеи или указатели о том, как это сделать?Должен ли я использовать «switchMapTo» и где я должен иметь это, в службе или компоненте?Есть ли другой лучший способ справиться с этим, могу ли я нажать на forkJoin, чтобы получать события по каждому завершенному запросу для увеличения индикатора выполнения?

1 Ответ

0 голосов
/ 21 сентября 2018

Короче говоря, вы можете сделать что-то, как показано ниже, используя merge, вы получите тот же эффект, что и forkjoin, т.е. все они работают одновременно.

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