title: rxjs BehaviorSubject next() called in a forEach loop causing network req to be cancelled
body: <p>I have a really fun rxjs problem to solve...</p>
  
  <ol>
  <li>So I have a function that receives an array of objects from my csv parser component <code>uploadCSV()</code></li>
  <li>this then splits the array into new arrays => items to be updates <code>line: 10</code> => items to be created <code>line: 11</code></li>
  <li>I then do a foreach loop and send each object to the BehaviorSubject and increment the counters respectively.</li>
  </ol>
  
  <p>The problem I am having is that this basically fires the first object off, but then I can see in the networks tool that all the subsequent requests are being canceled. I am assuming this is because the observable is receiving a new value before the request is completed.</p>
  
  <p>Not sure how to solve this? dinstinctUntilChanged and debounce maybe?</p>
  
  <pre><code>uploadCSV() {
      const dialogConfig = new MatDialogConfig();
      dialogConfig.autoFocus = true;
      dialogConfig.width = '100vw';
  
      const dialogRef = this.dialog.open(DataUploadComponent, dialogConfig);
  
      dialogRef.afterClosed().subscribe(airlines =&gt; {
          airlines = airlines.map(airline =&gt; ({...airline, id: +airline.id}));
          const update = airlines.filter(airline =&gt; this.airlines.some(item =&gt; item.id === airline.id));
          const create = airlines.filter(airline =&gt; !this.airlines.some(item =&gt; item.id === airline.id));
          create.forEach(item =&gt; {
              this.newAirlineSubject$.next(item);
              this.created = ++this.created;
          });
          update.forEach(item =&gt; {
              this.updateAirlineSubject$.next(item);
              this.updated = ++this.updated;
          });
          this.snackBar.open(
              `${this.updated} items updated : ${this.created} items created`, null,
              {
                  duration: 3000
              });
          this.snackBar._openedSnackBarRef.afterOpened().subscribe(() =&gt; this.updated = this.created = 0);
      });
  }
  
  const newAirline$ = this.newAirlineSubject$
      .pipe(
          filter(airline =&gt; !!airline),
          tap(() =&gt; this.saveStatus = 1),
          switchMap(airline =&gt; this.airlineService.newAirline(airline)),
          tap(() =&gt; this.saveStatus = 2),
          map(airline =&gt; {
              this.airlines = [airline, ...this.airlines];
              return this.airlines;
          }),
          tap(() =&gt; this.saveStatus = 0),
          shareReplay()
      );
  
  const updateAirline$ = this.updateAirlineSubject$
      .pipe(
          filter(airline =&gt; !!airline),
          tap(() =&gt; this.saveStatus = 1),
          switchMap(airline =&gt; this.airlineService.updateAirline(airline)),
          tap(() =&gt; this.saveStatus = 2),
          map(airline =&gt; {
              const index = this.airlines.findIndex(item =&gt; item.id === airline.id);
              this.airlines = [...this.airlines, this.airlines[index] = airline];
              return this.airlines;
          }),
          tap(() =&gt; this.saveStatus = 0),
          shareReplay()
      );
  
  const airlines$ = this.airlineService.getAllAirlines()
      .pipe(
          map(airlines =&gt; {
              this.airlines = [...airlines];
              return this.airlines;
          }),
          shareReplay()
      );
  
  this.airlines$ = airlines$.pipe(
      merge(newAirline$, updateAirline$)
  );
  </code></pre>