read data from multiple excel files and display on screen in angular

Question

below code read the excel file data from multiple sheets in a single file.

storeExportedData: any = [];
getSheetHeaders: any = [];

onFileChange(event: any) {
// store headers of all sheet seprately
this.getSheetHeaders = [];

/* wire up file reader */
const target: DataTransfer = <DataTransfer>event.target;

// read data from file as binary string
const reader: FileReader = new FileReader();
reader.readAsBinaryString(target.files[0]);

// get the name of file
this.storeExportedData['filename'] = target.files[0].name;

// read workbook when user clicked on file control
reader.onload = (e: any) => {
  /* create workbook */
  const binaryString: string = e.target.result;

  const workBook: XLSX.WorkBook = XLSX.read(binaryString, {
    type: 'binary',
  });

  // loop through data
  for (var i = 0; i < workBook.SheetNames.length; ++i) {
    const workSheetName: string = workBook.SheetNames[i];
    const workSheet: XLSX.WorkSheet = workBook.Sheets[workSheetName];

    // to get 2d array pass 2nd parameter as object {header: 1}
    
    const data = XLSX.utils.sheet_to_json(workSheet);
    console.log(XLSX.utils.sheet_to_json(workSheet, { header: 1 })); 

    // console.log(data);
    this.storeExportedData.push(data);
    this.storeExportedData[`sheet${i + 1}`] = data;

  }

  // console.log(JSON.stringfiy(this.storeExportedData));
   };
  }

I want to read bulk excel for instance use can upload as many excel files as needed the program should read data from and display it on the screen.

I try this method but was not able to solve it.

enter code here
fileList: File[] = [];
listOfFiles: any[] = [];

onFileChanged(event: any) {
 for (var i = 0; i <= event.target.files.length - 1; i++) {

        const reader: FileReader = new FileReader();
        reader.readAsBinaryString(target.files[i]);

          // get the name of file
         this.storeExportedData['filename'] = target.files[i].name;

          // read workbook when user clicked on file control
          reader.onload = (e: any) => {
            /* create workbook */
            const binaryString: string = e.target.result;

            const workBook: XLSX.WorkBook = XLSX.read(binaryString, {
                type: 'binary',
           });
           }
         }

my component.html file

 <table class="table table-responsive">
      <thead *ngFor="let headers of getSheetHeaders">
        <tr>
          <th>{{ headers[0] }}</th>
          <th>{{ headers[1] }}</th>
          <th>{{ headers[2] }}</th>
          <th>{{ headers[3] }}</th>
          <th>{{ headers[4] }}</th>
        </tr>
      </thead>
      <tbody *ngFor="let rows of storeExportedData">
        <tr *ngFor="let data of rows; let i = index">
          <td>{{ i + 1 }}</td>
          <td>
            {{ data.NewSiteID }}
          </td>
          <td>
            {{ data.Address }}
          </td>
          <td>
            {{ data.Latitude }}
          </td>
          <td>
            {{ data.Longitude }}
          </td>
          <td>
            {{ data.AccessNotes }}
          </td>
        </tr>
      </tbody>
    </table>

please help me how to handle this problem I Google it a lot but do not get any results. Thanks.