时间戳

首页 > 解决方案 > 在角度模板中创建变量并在模板本身中从 API 分配数据

angular - 在角度模板中创建变量并在模板本身中从 API 分配数据

问题描述

我有一个 20 行的产品表。我必须在每一行显示我应该从另一项服务获得的产品图像。限制是图像 API 一次只需要一个产品 ID 来返回图像 URL。所以我必须进行 20 次 API 调用才能获得 20 张图像。

我正在尝试使用响应式方法并尝试在模板本身中订阅 API，如下所示

      <div  let-product-data="getProductImage(1234)| async" >
        
          <img  src="{{product-data.image}}">

      </div>

TS 代码：

      getProductImage(imageId) {
         const url = `${environment.DEV}/product/stockroomInfo`;
         return this.http.post(url, {id:imageId});
      }

但是上面的代码不起作用。有人可以帮我解决我在这里做错的事情吗？

或者这不会以这种方式工作？我应该采取其他方法吗？建议，请

标签： angularrxjsrxjs6rxjs-observables

解决方案

您在 *ngFor 中使用异步管道的方法应该可以正常工作，但是，您的语法似乎不太正确。

而不是let-product-data，尝试这样的事情：

  <li *ngFor="let product of products$ | async">
    {{ product.name }}
    <img [src]="getProductImage(product.id) | async">
  </li>

这是一个有效的StackBlitz

推荐阅读