Angular Загрузка файла загружается во все блоки при использовании внутри * ngFor

Question

У меня есть массив объектов, в котором я повторяю, используя *ngFor. Здесь, когда я загружаю файл внутри одного div, все остальные divs, которые повторяются, загружаются одним и тем же файлом. Я хочу загрузить файл только для выбранного div. Ниже мой код.

<div *ngFor="let obj of objects">
  <div class="header-icons-holder">
    <div class="header-icon" (click)="file.click()">upload</div>
    <span style="display:none">
          <input type="file" #file (change)="onChange(file)" multiple>
    </span>
  </div>
  <div *ngIf="fileName">
    <p>{{fileName}}</p>
    <button type="button" (click)="removeFile()">Remove File</button>
  </div>
</div>

 toBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });

  async onChange(file) {
    this.file = file.files[0];
    this.fileName = file.files[0].name;

    console.log(await this.toBase64(this.file));
  }
  removeFile() {
    this.file = null;
    this.fileName = '';
  }

Answer 1

Проблема заключается в этих двух строках кода:

this.file = file.files[0];
this.fileName = file.files[0].name;

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

Я создал для вас этот stackbliz , который устраняет вашу проблему .

Что я сделал?

Я в основном удостоверился, что ваш элемент управления загрузкой файлов взаимодействует с конкретным c элементом в объекте вместо глобального обновления значений.