Angular Forms：当我更新产品时，前端不显示图像

Question

我正在做一个教程，我已经达到了可以无缝创建产品的部分，但是当我去更新同一个产品时，图像没有更新，即使我不改变它，它也显示为空白。

这里是组件TS文件：

 private _checkEditMode() {
      this.router.params.subscribe((params) => {
        if (params['id']) {
          this.editMode = true;
          this.currentProductId = params['id'];
          this.productsService
            .getProduct(params['id'])
            .subscribe((product) => {
             ...       
             ...      
              this.imageDisplay = product.image ; // I FEEL LIKE THERE IS SOMETHING WRONG WITH THIS LINE, 
            ...
            ...  
            });
        }
      });
    }

这里是服务ts代码：

export class ProductsService {
  
  apiURLProducts = environment.apiUrl + 'products';

 updateProduct(productData: FormData, productid: string): Observable<Product> {
    return this.http.put<Product>(`${this.apiURLProducts}/${productid}`, productData);
  }
}

这是 HTML：

 <tr>
  ...
  ...
   <td style="width: 15%;"><img [src]="product.image"  style="width: 100%" alt="" /></td>
  ...
  ...
 </tr>

有人建议我定义'product.image'，如果是这样，我该怎么办？谢谢。

Answer 1

您的 HTML 不知道

product

因为它是订阅方法的私有参数。

但是根据我的理解，当您将

product.image

放入

this.imageDisplay

你应该绑定

src

到

imageDisplay

<img [src]="imageDisplay" style="width: 100%" alt="" />

假设服务正常运行并且 imageDisplay 是组件的公共成员