如何在屏幕上显示多维数组值

Question

// aap.component.html

<ul  *ngFor="let items of exceltoJson" >
  <li> {{ items }} </li>
</ul>
<input type="file" (change)="onFileChange($event)">


// app.component.ts

onFileChange(event: any) {
    this.exceltoJson = {};
    
    /* wire up file reader */
    const target: DataTransfer = <DataTransfer>(event.target);
    
    const reader: FileReader = new FileReader();
    reader.readAsBinaryString(target.files[0]);
    
    
    this.exceltoJson['filename'] = target.files[0].name;
    reader.onload = (e: any) => {
      /* create workbook */
      const binarystr: string = e.target.result;
      const wb: XLSX.WorkBook = XLSX.read(binarystr, { type: 'binary' });

      for (var i = 0; i < wb.SheetNames.length; ++i) {
      
        const wsname: string = wb.SheetNames[i];
        const ws: XLSX.WorkSheet = wb.Sheets[wsname];
      
        const data = XLSX.utils.sheet_to_json(ws);
        this.exceltoJson[`sheet${i + 1}`] = data;

       
        
      }


      
      console.log(this.exceltoJson);
    };

  }

嗨，使用上面的代码我在控制台上获取了数据，但我想以表格形式显示在屏幕上。此数据来自单个文件的多个工作表。

我尝试了 forEach，JSON.parse() 但没有成功。任何人都可以帮助我如何使用 angular

显示

Answer 1

我认为解决方案是您必须在 component.html 文件中使用 2 *ngFor。

必须是这样的：

<.. *ngFor="let items of exceltoJson"> <.. *ngFor="let item of items"> </..> </..>

希望对你有所帮助！

Answer 2

考虑到您知道所有表格并且它们是固定的。

你可以

<ul  *ngFor="let items of exceltoJson[1]" >
  <li> {{ items }} </li>
</ul>

<ul  *ngFor="let items of exceltoJson[2]" >
  <li> {{ items }} </li>
</ul>

<input type="file" (change)="onFileChange($event)">

或者你可以像 @ataerg 建议的那样在 ngfor 中使用 ngfor

        <div *ngFor="let sheets of exceltoJson">
            <ul  *ngFor="let items of sheets " >
              <li> {{ items }} </li>
            </ul>
        </div>

如何在屏幕上显示多维数组值

how to display multi dimension array values on screen

javascript

arrays

import

excel

angular