Angular 7中如何在for/of循环中等待Observable订阅结果？

问题分析 #

你的核心需求是让循环按顺序执行每个collectionService.processImage请求，而非同时触发所有请求。之前的写法存在以下问题：

• 直接subscribe会立即触发所有Observable，导致请求堆积；
• await搭配subscribe无效，因为subscribe返回的是Subscription而非Promise；
• 使用toPromise报错，一方面是toPromise已被RxJS 7+弃用，另一方面是未正确处理Observable抛出的错误。

正确实现方式 #

方式一：async/await + firstValueFrom（推荐，契合你尝试的异步写法） #

使用RxJS提供的firstValueFrom将Observable转换为Promise，配合async/await实现顺序执行，同时用try/catch捕获错误：

import { firstValueFrom } from 'rxjs';

public async onUploaded($event) {
  for(const item of $event) {
    for (const r of this.collection.rows) {
      if (r.rowid === item.rowId) {
        r[this.imageColProp] = item.key;
        try {
          const result = await firstValueFrom(
            this.collectionsService.processImage(this.collection.listid, item.rowId, item.key)
          );
          // 在这里同步处理result，处理完成后才会进入下一次循环
          ...
        } catch (err) {
          this.toastr.error(err);
        }
      }
    }
  }
}

关键说明：

• firstValueFrom会等待Observable发出第一个值后完成并返回Promise，替代已弃用的toPromise；
• try/catch必须包裹，否则Observable抛出的错误会导致整个async函数中断；
• 外层for...of循环在await时会暂停，直到当前请求处理完成才继续下一次迭代。

方式二：纯RxJS算子实现（更符合RxJS思维） #

如果想全程用RxJS的方式处理，可以将事件转换为Observable，用concatMap保证顺序执行：

import { from, EMPTY } from 'rxjs';
import { concatMap, tap } from 'rxjs/operators';

public onUploaded($event) {
  from($event).pipe(
    concatMap(item => {
      const matchedRow = this.collection.rows.find(r => r.rowid === item.rowId);
      if (!matchedRow) return EMPTY;

      matchedRow[this.imageColProp] = item.key;
      // concatMap会等待当前processImage的Observable完成后，再处理下一个item
      return this.collectionsService.processImage(this.collection.listid, item.rowId, item.key).pipe(
        tap(result => {
          // 处理result
          ...
        })
      );
    }),
  ).subscribe({
    error: err => this.toastr.error(err)
  });
}

关键说明：

• from($event)将数组转换为Observable，逐个发出item；
• concatMap会等待内部Observable（processImage）完成后，再订阅下一个外部Observable的item，保证顺序执行；
• 统一在subscribe的error回调处理错误，避免重复捕获。

内容的提问来源于stack exchange，提问作者Kirk Ross