Question

所以我想创建一个网页，我可以上传excel（xlsx）文件，然后将其数据显示到页面。我能够通过使用xlsx库实现这一目标。但现在的问题是，如果我上传一个excel文件，然后通过ms excel编辑其数据，然后再次在页面上传，我对该文件所做的编辑将不会显示在页面上。它仍显示我尚未编辑文件时的数据。这是我的组件代码.ts

data: AOA = [ [], [] ];     
reader: FileReader = new FileReader();
    onFileChange(evt: any) {
        //this._router.navigate(['']);
        /* wire up file reader */
        console.log('HERE');
        const target: DataTransfer = <DataTransfer>(evt.target);
        if (target.files.length !== 1) throw new Error('Cannot use multiple files');
        this.reader.onload = (e: any) => {
        /* read workbook */
        this.data = [ [], [] ];
        console.log(this.data);
        const bstr: string  = e.target.result;
        const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
        /* grab first sheet */
        const wsname: string = wb.SheetNames[0];
        const ws: XLSX.WorkSheet = wb.Sheets[wsname];
        /* save data */
        this.data = <AOA>(XLSX.utils.sheet_to_json(ws, {header: 1}));
        console.log(this.data);
        }
        this.reader.readAsBinaryString(target.files[0]);
    }

这是我在component.html中显示数据的代码

<div>
  <input type="file" (change)="onFileChange($event)" name="fileUploaded" value="Choose a File" accept=".xlsx, .xls">
  <br>
  <table class="sjs-table table table-striped">
      <tr *ngFor="let row of data">
        <td *ngFor="let val of row">
          {{val}}
        </td>
      </tr>
  </table>
  <input (click)="export()" type="submit" id="exportButton" value="Export">
</div>

我尝试调试它，发现问题是（更改）侦听器。它不会执行onFileChange（$ event），除非我上传的文件确实已更改。我尝试研究变革听众的替代方案，但我没有找到任何东西。你们知道另一种选择吗？或者你能建议我做什么？我应该改变上传文件的方式吗？

我目前正在使用Angular CLI：1.7.4;节点：8.11.1; Typescritp：2.8.1希望有人可以提供帮助。

（改变）听众的替代方案？

0 个答案: