ngFor 中嵌套异步的最佳实践？答案

【问题标题】：Best practices for nested async inside of ngFor?ngFor 中嵌套异步的最佳实践？
【发布时间】：2021-11-15 10:51:12
【问题描述】：

假设我有一个汽车清单：

const cars: Array<{carId: number}> = [{carId: 1}, {carId: 2}];

然后我在模板中渲染它们：

<div *ngFor=“let car of cars”></div>

在该模板内部，我想从返回可观察对象的方法中获取一些动态图像路径：

<div *ngFor=“let car of cars”>
    <img [src]=“getImagePath(car) | async”>
</div>

getImagePath(car: {carId: number}): Observable<string> {
   return //some service request that brings back a url based on the carId
}

对于状态管理和存储，我使用的是 Firebase。我的所有图片都存储在一个存储桶中，我可以通过为我的服务提供一个 carId 来获取它们，该 carId 使用它来获取下载 URL。

我想避免在第一次保存文件时使用 downloadURL 更新 Firestore，因为我会将它们存储在子集合中，并且由于 Firestore 的性质，将它们从那里拉出来已经很痛苦了。

有没有办法更有效地做到这一点？如果列表开始增长，上面的代码肯定会让浏览器爬起来……对吧？

【问题讨论】：

也许我不明白；但是你为什么认为浏览器会爬起来呢？显然，如果你有大量的汽车列表，你会得到很多divs；然后您将下载许多图像......但这就是您正在构建的页面的性质（如果您不分页） - 不是 Angular 代码的低效率。另外，我不明白 Firestore 与您的问题有何关联
不是吗？如果我有一百辆车怎么办？ DOM 渲染时不是有一百个活动订阅吗？我只提到 Firebase 是为了避免建议存储图像路径并将它们包含在汽车对象中的响应。

标签： angular firebase firebase-storage async-pipe angular-ngfor

【解决方案1】：

您可以将其变成一个可观察对象并订阅一次，然后将返回的数组显示到您的 html 中，而不是直接在每个 img 元素上调用请求。

我使用了几个 RXJS 运算符来得到你想要的。

mergeMap 扁平化内部 observable
of 将 cars 数组转换为 observable
map 将 cars 数组转换为具有相应汽车图像路径的新数组
forkJoin - 我们将多个请求封装到一个 observable 中，并且只有在收到所有请求的响应时才会返回。

这当然只是一种方法，可能还有其他更好的方法。

getCarImages() {
  const cars: Array < {
    carId: number;
  } > = [{
      carId: 1,
    },
    {
      carId: 2,
    },
  ]; 
  of(cars)
  .pipe(
      mergeMap((e) => {
        return forkJoin(
          e.map((item) => this.apiService.getCarImages(item.carId))
        ).pipe(
          map((paths) => {
            console.log(paths);
            return e.map((car, index) => ({
              ...car,
              imagePath: paths[index],
            }));
          })
        );
      })
    )
    .subscribe((res) => {
      this.cars = res;
      console.log(this.cars);
    });
}

HTML：

<div *ngFor="let car of cars">
  <img [src]="car?.imagePath" />
</div>

我创建了一个stackblitz 来模拟解决方案。

【讨论】：

@katysha - 我认为你的方法更简单更好