Angular — анализ нескольких файлов не работает

Я пытаюсь загрузить несколько файлов из блока *ngFor. Я не могу правильно проанализировать содержимое

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

это мой html-код

  <div *ngFor = "let data of fileList, let i = index">

    <label class = "adpLabel">{{data.fileDesc}}</label>   
    <input readonly  type = "text" value = {{filename[i]}}>
    <input type = "file" id = "{{data.fileName}}" name = "{{data.lastUpdateTsFile}}"
    #selectFiles hidden accept = ".xls,.xlsx" (change) = "getFileInfo($event, i)">
    <button mat-button (click) = "selectFiles.click()" class = "browseBtn">Browse</button>    
 </div> 

это мой файл component.ts

export class appComponent implements OnInit {


 fileType : any = [];
 filename : any = [];
 file : any = [] ;


 getFileInfo(event, i) {

this.file.push(event.target.files);
this.fileType.push(event.target.id);
this.fileUploadDate.push(event.target.name);

for (let i = 0; i < this.file.length; i++) {
  let fileName = this.file[i][0].name; 
  let id = this.fileType[i];
  let fileDate = this.fileUploadDate[i];
  let extension = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();

  if ( extension= = ".xls" || extension= = ".xlsx" ) {

    this.filename[i] = fileName; 
    this.fileType[i] = id;

    }

  }
}
  } 

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