html Angular Forms:更新产品时,前端不显示图像

5m1hhzi4  于 2023-04-18  发布在  Angular
关注(0)|答案(1)|浏览(130)

我正在做一个教程,我已经达到了可以无缝创建产品的部分,但是当我去更新同一个产品时,图像没有更新,即使我不改变它,它也会出现空白。
下面是组件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>

有人建议我定义“产品。图片”,如果是这样的话,我该怎么做呢?谢谢。

wvmv3b1j

wvmv3b1j1#

您的HTML不知道product,因为它是subscribe方法的私有参数。
但是根据我的理解,当您将product.image放入this.imageDisplay时,您应该将src绑定到imageDisplay
<img [src]="imageDisplay" style="width: 100%" alt="" />
假设服务工作正常,并且imageDisplay是组件的公共成员

相关问题