Как суммировать наблюдаемый массив в число

Question

Как бы я суммировал this.uploads массив наблюдаемых, чтобы я мог получить общий процент загрузки в дополнение к каждому отдельному проценту завершения загрузки?

uploadFile(event) {
    // reset the array 
    const filelist = event.target.files;
    const allPercentage: Observable<number>[] = [];
    for (var i = 0; i < filelist.length; i++) {
      const file = filelist[i];
      const filePath = `${file.name}`;
      const fileRef = this.storage.ref(filePath);
      const task = this.storage.upload(filePath, file);
      const _percentage$ = task.percentageChanges();
      this.uploads[i] = _percentage$;
      this.totalPercentage.push(_percentage$);
  }

Answer 1

Возможным решением является использование оператора RxJs ОбъединитьПоследний . Посмотрите здесь , чтобы понять, как это работает.
Когда значение выводится из какой-либо из наблюдаемых, вам необходимо пересчитать общий процент выполнения из всех значений завершений загрузки.

Вот стек-блиц , демонстрирующий решение.
Это абстрактная демонстрация концепции, которая имитирует загрузку файлов, передавая значения от 0 до 100 через произвольный интервал времени.
Индивидуальные и общие проценты завершения просто отображаются.

import { Component } from '@angular/core';
import { combineLatest, Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let observable of observables; let i = index">observable {{i + 1}}: {{observable | async}}</li>
    </ul>
    <p>total = {{total}}</p>`,
})
export class AppComponent {
  private readonly OBSERVABLES_COUNT = 10;

  total = 0;
  observables: Observable<number>[] = [];

  constructor() {
    // create observables
    for (let i = 0; i < this.OBSERVABLES_COUNT; i++) {
      this.observables.push(this.createObservable());
    }

    // listen to combined streams
    combineLatest(this.observables).subscribe(values => {
      // when a value is emited from any of the streams, recalculate total
      let total = 0;
      // sum values
      values.forEach(value => total += value);
      // divide by observables count to get average
      total /= this.OBSERVABLES_COUNT;
      // display total
      this.total = total;
    });
  }

  /**
   * This creates an observable roughly simulating a file upload.
   * Values are emitted at a constant random time interval from 0 to 100.
   */
  createObservable(): Observable<number> {
    // create observable
    return Observable.create(observer => {
      // init value
      let value = 0;
      // init interval
      const interval = setInterval(
        () => {
          // increment value
          value += 10;
          // emit it
          observer.next(value);
          // stop when value reaches 100
          if (value === 100) {
            // complete observable
            observer.complete();
          }
        },
        // set a random time interval
        Math.random() * 1000,
      );
      // start with 0
      observer.next(0);
    });
  }
}