从 APi 获取图像 [关闭]答案

【问题标题】：Get Image from APi [closed]从 APi 获取图像 [关闭]
【发布时间】：2020-10-13 14:43:34
【问题描述】：

我正在尝试实现此代码以对图像进行 API 调用但没有成功：

 <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImage(product.productImage)"
        [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
    </div>

组件：

mainImage(productImage: number) {
    this.productService.getProductImage(productImage);
  }

服务：

getProductImage(imageId) {
    return this.http.get<any>(environment.apiKey + '/engine/product/files/' + imageId)
  }

当我这样使用它时：

<div class="col-xl-4 col-lg-6" *ngFor="let product of products">
      <kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" image="http://123.123.122.1:8090/engine/product/files/{{product.productImage}}"
        [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
    </div>

一切正常。你知道我哪里错了吗？

【问题讨论】：

标签： angular typescript angular10

【解决方案1】：

您的服务函数getProductImage 返回一个Observable，因此您需要将async pipe 添加到您的image @input 参数中，如下所示：

<kit-general-16 [isNew]="product.isNew" [isFavorite]="product.isFavorite" [image]="mainImage(product.productImage) | async"
    [name]="product.title" [price]="product.price" [oldPrice]="product.oldPrice" routerLink="../edit-product/{{product.id}}"></kit-general-16>
</div>

【讨论】：