来自数组中的RXJS以相同的顺序执行

Question

我需要执行从数组创建的可观察物。下一个可观察到的条件应等到以前的可观察到完成。提前致谢 ：-）。

export class AppComponent{
    arr: number[] = [5, 4, 1, 2, 3];    
    fetchWithObs() {
        from(this.arr)
          .pipe(
            map((value) => {
              return this.getData(value);
            })
          )
          .subscribe((data) => {
            console.log(data);
            /**
             * The expoected output should be
             * 5 completed
             * 4 completed
             * 1 completed
             * 2 completed
             * 3 completed
             */
          });
      }
    
      getData(p: number) {
        return new Observable<string>((s) => {
          setTimeout(() => {
            s.next(`${p} completed`);
            s.complete();
          }, p * 1000);
        });
      }
}

Answer 1

尝试ConcatMap。

export class AppComponent{
    arr: number[] = [5, 4, 1, 2, 3];    
    fetchWithObs() {
        from(this.arr)
          .pipe(
            concatMap(this.getData)
          )
          .subscribe(console.log);
      }
    
      getData(p: number) {
        return new Observable<string>((s) => {
          setTimeout(() => {
            s.next(`${p} completed`);
            s.complete();
          }, p * 1000);
        });
      }
}

Stackblitz： https://stackblitz.com/editiit/stackblitz.com/edit/eedit/dypescript-axx8ggf?file= index.ts