Как удалить изображение из компонента в Angular до получения нового из API

Question

У меня есть дочерний компонент, который получает изображение из api и отображает его в шаблоне. Родительский компонент содержит список элементов, когда пользователь выбирает один из элементов, в API отправляется запрос на получение изображения, принадлежащего элементу, дочерний компонент отображается и изображение, принадлежащее этому элементу, отображается .

Проблема, с которой я сталкиваюсь, заключается в том, что, когда пользователь выбирает новый элемент из списка, отображается дочерний компонент, но изображение из предыдущего элемента отображается до тех пор, пока не будет получен запрос от API, а новый изображение отображается.

Я не хочу отображать предыдущее изображение, так как оно сбивает с толку и непоследовательно для пользователя. Приветствуются любые предложения, как это сделать sh.

Вот шаблон родительского компонента, в котором вызывается дочерний компонент:

    <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);
    }
  }

Answer 1

Способ, которым я решил эту проблему, заключался в установке значения this.image равным null для родительского и дочернего компонентов в начале функций соответственно. 1003 *

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
    }
}