如何在从 API 获取新图像之前从 Angular 中的组件中删除图像答案

【问题标题】：How to remove an image from a component in Angular before a new one is obtained from API如何在从 API 获取新图像之前从 Angular 中的组件中删除图像
【发布时间】：2020-05-08 15:23:41
【问题描述】：

我有一个从 api 获取图片并将其显示在模板上的子组件。父组件包含一个item列表，当用户选择其中一个item时，会向api发送请求，获取该item的图片，子组件显示并显示该item的图片.

我的问题是当用户从列表中选择一个新项目时，会显示子组件，但会显示上一个项目的图片，直到收到来自api的请求并呈现新图片。

我想避免显示上一张图片，因为这会让用户感到困惑和不一致。任何建议如何实现这一点表示赞赏。

这里是调用子组件的父组件模板：

    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="shownColumns.length">
        <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
          <div>
            <image-card [img64]="img64"></image-card> -->
          </div>
        </div>
      </td>
    </ng-container>

Child img64 @Input:
@Input()
  public set img64(value: blob) {
    this.loadingData = true;
    if (value) {
      this.image = value.base64Image;
      const objectURL = 'data:image/jpeg;base64,' + this.image;
      this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
    }
  }

【问题讨论】：

在请求之前找到加载的gif图像，当数据到来时将其放入然后更改它
您可以使用布尔标志将子组件包装在 ng-container 中。尝试获取数据时将其设置为true 或false。

标签： angular image api rendering

【解决方案1】：

我解决这个问题的方法是在函数的开头分别将父组件和子组件的“this.image”值设置为空。

服务调用api的父组件：

displaySelectedItem(id: number) { 
    this.selectedImage = null; 
    this.selectedItemService. 
    getItemData(id).pipe(takeUntil(this._unsubscribe$))
    .subscribe((itemImage: ItemImage)=> (this.selectedImage = itemImage)); 
}

子组件：

@Input() 
public set itemImage(value: ItemImage) { 
    this.selectedImage = null; 
    if(value) {
        this.itemImage = value.itemImage
    }
}

【讨论】：