Проблема с несколькими входными файлами в цикле * ngFor - PullRequest
Новая
       17

Проблема с несколькими входными файлами в цикле * ngFor

0 голосов
/ 03 апреля 2020

У меня проблемы с наведением правильного ввода, когда он находится в * ngFor l oop. Когда я добавляю изображение с первым вводом (Димматризация сертификата), я показываю изображение заполнителя и кнопку удаления, чтобы сбросить ввод (что работает), но оно отображается под обоими div.

Я хочу нацелить только на введите, где я добавил фактическое изображение. У меня есть ViewChild, но я не могу заставить его работать.

Смотрите изображение здесь

и вот код: 

<div class="files">
     <div class="single-file" *ngFor="let file of files">
          <h5>{{file.title}}</h5>
          <input type="file" name="file" id="{{file.slug}}" class="inputfile" #fileInput (change)="addFile(fileInput.files[0])" />
          <label for="{{file.slug}}" *ngIf="!hasFile || isDeleted">
          <img class="d-none d-xl-inline-block" src="assets/images/addImg.png" alt="">
          Ajouter votre photo
          <img class="d-block d-xl-none" src="assets/images/addImg_big.png" alt="">
     </label>
     <div class="placeholder" *ngIf="hasFile && !isDeleted">
          <img [src]="imageUrl" />
      </div>
      <div class="deleteImg" *ngIf="hasFile && !isDeleted" (click)="deleteFile()">
          <div class="btn btn-outline"><img src="assets/images/delete-x-icon.png" alt="Supprimer">Supprimer</div>
          </div>
     </div>
</div>

и в .ts:

Я объявляю все свои переменные 

file: File;
imageUrl: string | ArrayBuffer = '../app/assets/images/imgAdded.png';
hasFile = false;
isDeleted = false;

@ViewChild('fileInput', { static: false }) myFileInput: ElementRef;

files: any = [{
    'title': 'Certificat dimmatriculation',
    'slug': 'immatriculation',
    'input': '#fileInput1'
}, {
    'title': 'Preuve dassurance',
    'slug': 'insurance',
    'input': '#fileInput2'
}];

addFile(file: File) {
    if (file) {
        this.hasFile = !this.hasFile;
        // this.fileName = file.name;
        this.file = file;

        const reader = new FileReader();
        reader.readAsDataURL(file);

        reader.onload = event => {
            this.imageUrl = this.imageUrl;
            // this.imageUrl = reader.result;
        };
    }
}

deleteFile() {
    this.isDeleted = !this.isDeleted;
    this.myFileInput.nativeElement.value = '';
}

1 Ответ

0 голосов
/ 06 апреля 2020

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

Я упростил примеры кода для целей демонстрации и помог вам увидеть, какой подход я выбрал.

I Я использую свойство для отдельных файлов с именем imageUrl для хранения URL загруженных данных изображения. Наличие значения в этом свойстве означает, что изображение было загружено. Свойство очищается при удалении изображения.

компонент. html

<div *ngFor="let file of files">
  <h5>{{file.title}}</h5>    
  <label *ngIf="!file.imageUrl">
    <input type="file" (change)="addFile(file, $event)" />
    Ajouter votre photo
  </label>  
  <ng-container *ngIf="file.imageUrl">
    <img [src]="file.imageUrl" />
    <button (click)="deleteFile(file)">Supprimer</button>
  </ng-container>
</div>

Все действия теперь выполняются над отдельными file объектами, и должны быть переданы в обработчики событий. В качестве альтернативы вы можете использовать индекс массива вместо ссылки на объект.

Существует также некоторая путаница между экземплярами file и файлом, загруженным из входных данных. Я бы порекомендовал переименовать переменные files и file во что-то другое, если это возможно, и зарезервировать file на случай, если вы имеете дело с вводом файла.

component.ts 

addFile(file, event) {
  const uploaded = event.target.files[0];
  if (!uploaded) {
    return;
  }

  const reader = new FileReader();
  reader.onload = () => {
    file.imageUrl = reader.result;
  };

  reader.readAsDataURL(uploaded);
}

deleteFile(file) {
  file.imageUrl = '';
}

DEMO: https://stackblitz.com/edit/angular-bcgwrq

...