Typescript 使用ngfor循环时，数据未绑定到表

我想以Angular 将数据绑定到表控件，但表中没有填充数据.该表仅显示了我在HTML中定义的静态列名.首先，我从一个EXCEL文件中获取数据，并将其赋给一个名为ItemsArray的变量.这是我的代码

onFileChange(evt: any) {
    const target: DataTransfer = <DataTransfer>(evt.target);
  
    const reader: FileReader = new FileReader();
    reader.onload = (e: any) => {
    const bstr: string = e.target.result;
    const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

    const wsname = wb.SheetNames[0];
    const ws: XLSX.WorkSheet = wb.Sheets[wsname];

    let data = (XLSX.utils.sheet_to_json(ws, { header: 1 })); 

    this.ItemsArray =data
    console.log(data);
    reader.readAsBinaryString(target.files[0]);
    
    }
  
  }

这是我的html代码

<div>

  <div style="margin: 50px auto;width: 50%;">
    <h2>Please select a file: </h2>
    <input type="file" (input)="onFileChange($event)" multiple="false">
  </div>

  <div>
    <h1>Angular Table with Excel Data</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>ID</th>
          <th>Address</th>
          <th>Company</th>
          <th>Skills</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of ItemsArray">
          <th>{{ item.Name }}</th>
          <td>{{ item.ID }}</td>
          <td>{{ item.Address }}</td>
          <td>{{ item.Company }}</td>
          <td>{{ item.Skills }}</td>
          <td>{{ item.Email }}</td>
          <td>
            <button type="button">Edit</button>
            <button type="button">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>

当我调试代码时，我可以看到此行上的数据被赋值为ItemsArray

this.ItemsArray =data

如何解决此问题？我应该采取其他方法吗？

请找到下面的错误屏幕截图

第二个错误屏幕截图

我的EXCEL数据，但程序不应该依赖于EXCEL数据.