Добавьте заголовок с каждым изображением перед сохранением в Angular 6

Question

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

<input class="form-control" id="uploadimg" type="file" name="fileupload1" (change)="detectFiles($event,'gallery')" multiple>

<ng-container *ngFor="let url of urls;let n = index;">
  <div class="gallery-close">

    <div class="row-field">
      <h4>Title</h4>
      <input class="field-200" name="gal_title" size="25" />
    </div>
    <img [src]="url" name="url" class="rounded mb-3" width="100" height="100">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
</ng-container>

Массив URL-адресов заполнен детект-файлами:

export class AppComponent {

  urls = new Array<string>();

  detectFiles(event) {
    this.urls = [];
    let files = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
      }
    }
  }
}

Answer 1

Создать model, которые содержат title и file

FileUploadModel.ts

export class FileUploadModel{
file: File;
title: string;
}

В вашем компоненте использовать

export class AppComponent  {
  urls = new Array<string>();
  list: Array<FileUploadModel>=[];
  title:string;

  detectFiles(event) {
    this.urls = [];
    let files = event.target.files;
    if (files) {
      for (let file of files) {
        let reader = new FileReader();
        reader.onload = (e: any) => {
          this.urls.push(e.target.result);
        }
        reader.readAsDataURL(file);
        //push the file list and title to list of model
        this.list.push({ file: file, title: '' });
      }
    }
  }
  save(){
    console.log(this.list)
  }
}

В html добавьте ngModel к заголовку

 <input [(ngModel)]="list[n].title" class="field-200" name="gal_title" size="25" />

Я создал в своем github хранилище для загрузки файла, который выможно взглянуть

Вот пример стекаблица