问题描述

视频

我制作了一个简短的 15 秒 Youtube 视频来演示这个错误，因为这里很难解释是视频：https ://www.youtube.com/watch?v=YXykw2oSh8E ---请忽略我糟糕的编辑技巧

简短的摘要

我将在这里总结错误：如果我有两个图像标签，并且我试图更改位于 html 文件中较低位置的较低图像标签，则最高img标签上的图像将被更改，而不是我即使逻辑在单独的组件实例中也被选中

代码布局

在我的代码中，我有两个<app-image-display>组件堆叠在一起。当我尝试使用其名称coverPhoto更新图像时，将更新名为profile. 如果我coverPhoto在 html 文件中将命名实例移动到比命名实例更高的位置profile并尝试更改profile它将更新coverPhoto.

家长

我有一个看起来像这样的父组件：

....
<div *ngIf="company">
    <app-image-display name="profile" id="profile" #profile [image]="company.profileUrl" [uploadPath]='companyProfilePath' (imageUpdated)="updateImage($event, CompanyImage.PROFILE)"></app-image-display>
    
    <app-image-display name="coverPhoto" id="coverPhoto" #coverPhoto [image]="company.coverPhotoUrl" [uploadPath]='companyCoverPath' (imageUpdated)="updateImage($event, CompanyImage.COVER_PHOTO_URL)"></app-image-display>
</div>
.....

您可以看到它包含名为 ImageDisplay 的同一组件的两个独立实例。其中一个实例用于处理个人资料图像，另一个用于处理封面照片。我输入了临时逻辑来告诉我哪张是封面照片，只是为了明确地显示在视频中。该组件旨在显示使用先前保存的图像，然后允许他们查看新图像（tempImage），然后再将其保存到数据库。ImageDisplayComponent 如下所示：

图像显示 Html

<img [src]="image" width="200" *ngIf="!tempImage" height="200" class=" img-thumbnail" alt="Responsive 
image" onerror="this.src = 'TEMP_IMG_URL_GOES_HERE'">

<img [src]="tempImage" *ngIf="tempImage" width="200" height="200" class=" img-thumbnail" 
alt="Responsive image">
<span *ngIf="uploadPath.includes('cover')">Cover Image</span>
<app-image-picker *ngIf="!percentage" (imageSelected)="imageSelected($event) (tempImageSelected)="tempSelected($event)"></app-image-picker>

图像显示 TS

.ts 看起来像这样：

...
export class ImageDisplayComponent implements OnInit {
  @Output() imageUpdated: EventEmitter<string> = new EventEmitter();
  @Input() image: string = '';
  @Input() uploadPath: string
  tempImage: string;
  percentage: Observable<number>;
  selectedPictureFile: File;
  task: AngularFireUploadTask;



  constructor(
    private dbs: AngularFireStorage,
    private toastService: ToastService
  ) { }

  ngOnInit(): void {
    console.log(this.uploadPath)
  }


  imageSelected(image: File) {
    this.selectedPictureFile = image;
    this.fileUpload(this.uploadPath, this.selectedPictureFile);
  }

  async fileUpload(path: string, file: File): Promise<void> {
    const ref = this.dbs.ref(path);
    this.task = this.dbs.upload(path, file);
    this.percentage = this.task.percentageChanges();
    let imageUrl = '';
    from(this.task).pipe(
      switchMap(() => ref.getDownloadURL()),
      map((img) => imageUrl = img),
      finalize(() => delete this.percentage)
    ).subscribe(() => { 
      this.imageUpdated.emit(imageUrl)
    },(error) => {
      this.toastService.show(`${error.message}`, {
        delay: 3000,
        autohide: true
      });
    });
  }

  tempSelected(imageUrl: string) {
    this.tempImage = imageUrl;
  }
}
...

图像选择器组件 Html

app-image-picker 如下所示：

<div style="margin: 5px">
<label for="file-upload" class="custom-file-upload">
   {{labelText}}
</label>
<input type="file" id="file-upload" (change)="onPictureSelected($event)" accept=".png, .jpg">
<div class="row">
    <button *ngIf="pictureSelected" class="btn btn-info m-1" [disabled]="!pictureSelected" (click)="uploadPicture()">
        Save
    </button>
    <button *ngIf="pictureSelected" class="btn btn-warn m-1" [disabled]="!pictureSelected" (click)="cancel()">
        Cancel
    </button>
</div>

图像选择器组件 TS

这是 onPictureSelected 函数的样子：

// image selection and verification.
  onPictureSelected(event) {
    this.selectedPictureFile = event.target.files[0] as File;
    const reader = new FileReader();
    reader.readAsDataURL(this.selectedPictureFile);
    if (!this.imageService.isImage(this.selectedPictureFile.name)) {
      this.pictureSelected = false;
    } else if (!this.imageService.isAllowedSize(this.selectedPictureFile.size)) {
      this.pictureSelected = false;
    } else {
      // tslint:disable-next-line:no-shadowed-variable
      reader.onloadend = (event: any) => {
        if (event.target) {
          this.selectedPictureURL = event.target.result;
          this.tempImageSelected.emit(this.selectedPictureURL);
        }
      };
      this.pictureSelected = true;
    }
  }

我在 Angular 版本 9.0.3

标签： javascripthtmlangularfile

javascript - 更改子组件中的图像将更新父组件中更高的大多数 html img 标签