Как использовать ViewChildren для ввода изображений тега ввода и отображения их в консоли

Question

Мой HTML-код:

<form [formGroup]="linkSubmitForm" (ngSubmit)="onSubmit()"></form>
   <input #myInput *ngFor="let link of links.controls; let i=index" class="form-control" type="file" [formControlName]="i" required>
   <button type="submit">Submit</button>
</form>

Мой TS-код:

@ViewChild('myInput') inputEl: ElementRef;
@ViewChildren('myInput', { read: ElementRef }) many_links_el: QueryList<ElementRef>

get links() { return this.linkSubmitForm.get('links') as FormArray; }

ngOnInit() {  while(--3) this.links.push(this.formBuilder.control('') }

onSubmit() {
let inputEl: HTMLInputElement = this.inputEl.nativeElement;

//var formData = new FormData();
this.file = inputEl.files;

console.log('file object', this.file);
this.many_links_el.toArray();

// ???  What to do next? ???
}

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

Итак, я использую ViewChildren, но не могу этого сделать ...

Answer 1

вы можете просмотреть каждый элемент ref в коллекции this.many_links_el, например,

  let files=[];
    this.many_links_el.forEach((e)=>{
     let inputElement=e.nativeElement;
      if(inputElement.files.length){
         files.push(inputElement.files[0])
      }
    })
    console.log(files)

demo