Excel 将XLS（x）数据转换为角度材质数据表

我正在从事一个项目，需要从Excel电子表格（最终是多张图纸）导入数据，并希望在角度材质数据表中显示数据

我可以使用npm-xlsx模块将Excel数据作为csv、json、html或文本加载到我的组件中。
我的HTML页面工作正常，但任何传递数据的尝试都会给我一个空白表。数据与mat表格读取数据的方式不一致。我有一个标准的HTML表格，可以正常工作并正确显示数据，但我确实需要来自Angular Material的功能

这将为我提供以下格式的数据：

Block1: 
Data:    0: (5) ["SYMBOL", "QTY", "MFG", "PART NUMBER", "DESC"]
         1: (5) ["TB2", 1, "AB", "1492-EBJ3", "PLASTIC END BARRIER, GRAY FOR AB 1492-J*"]
         2: (5) ["TB2", 11, "AB", "1492-J4", "SINGLE CIRCUIT SCREW TERMINAL BLOCK, 22-10 AWG, GRAY, 35A, 4MM"]
         3: (5) ["ECR1", 1, "AB", "700S-CF620DC", "CF TYPE SAFETY CONTROL RELAY,  120VAC COIL, 8 POLE, 6 NO 2 NC STANDARD CONTACTS"]
         4: (5) ["SPARE", 5, "BUSSMANN", "AGC-1/2", "FAST ACTING, 1/2AMP, 250V, 1/4 X 1-1/4 INCH, GLASS TUBE FUSE"]

 Block2:
     0: {partId: 1, partNumber: "*M-XB-12248", description: "Killark XB-12248 mod. w/holes", supplierId: 31, supplierName: "Kendall Electrical Supply", …}
     1: {partId: 4, partNumber: "E9UVCRN", description: "1 Gang Vertical Box, Weatherproof", supplierId: 31, supplierName: "Kendall Electrical Supply", …}
     2: {partId: 79, partNumber: "F66G36", description: "36" Straight Wireway Section", supplierId: 31, supplierName: "Kendall Electrical Supply", …}
     3: {partId: 21, partNumber: "EMT1-1/4 ELB", description: "1 1/4" EMT Sweep", supplierId: 14, supplierName: "Graybar", …}

我需要将其转换为以下格式：

Block1: 
Data:    0: (5) ["SYMBOL", "QTY", "MFG", "PART NUMBER", "DESC"]
         1: (5) ["TB2", 1, "AB", "1492-EBJ3", "PLASTIC END BARRIER, GRAY FOR AB 1492-J*"]
         2: (5) ["TB2", 11, "AB", "1492-J4", "SINGLE CIRCUIT SCREW TERMINAL BLOCK, 22-10 AWG, GRAY, 35A, 4MM"]
         3: (5) ["ECR1", 1, "AB", "700S-CF620DC", "CF TYPE SAFETY CONTROL RELAY,  120VAC COIL, 8 POLE, 6 NO 2 NC STANDARD CONTACTS"]
         4: (5) ["SPARE", 5, "BUSSMANN", "AGC-1/2", "FAST ACTING, 1/2AMP, 250V, 1/4 X 1-1/4 INCH, GLASS TUBE FUSE"]

 Block2:
     0: {partId: 1, partNumber: "*M-XB-12248", description: "Killark XB-12248 mod. w/holes", supplierId: 31, supplierName: "Kendall Electrical Supply", …}
     1: {partId: 4, partNumber: "E9UVCRN", description: "1 Gang Vertical Box, Weatherproof", supplierId: 31, supplierName: "Kendall Electrical Supply", …}
     2: {partId: 79, partNumber: "F66G36", description: "36" Straight Wireway Section", supplierId: 31, supplierName: "Kendall Electrical Supply", …}
     3: {partId: 21, partNumber: "EMT1-1/4 ELB", description: "1 1/4" EMT Sweep", supplierId: 14, supplierName: "Graybar", …}

我关注的是这两个块的格式，而不是块中的特定数据（块2来自另一个正在读取JSON文件的应用程序部分）

这是我用来读取/解析Excel数据的角度组件，我还想将数据转换为上面Block2中的类型

import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import * as XLSX from 'xlsx';

export class BoMItem {
  item: string;
  symbol: string;
  qty: number;
  mfg: string;
  partNumber: string;
  desc: string;
}

@Component({
  selector: 'app-bom-list',
  templateUrl: './bom-list.component.html',
  styleUrls: ['./bom-list.component.css']
})
export class BomListComponent implements OnInit {

  data: [][];

  @ViewChild('bomTable', { static: false }) bomTable: ElementRef;

  // dataSource = new MatTableDataSource<BoMItem>();

  dataSource = new MatTableDataSource<BoMItem>();
  // displayedColumns: string[] = ['item', 'symbol', 'qty', 'mfg', 'partNumber', 'desc'];
  displayedColumns: string[] = ['partNumber', 'mfg', 'desc', 'qty'];

  importFile: File;
  storeData: any;
  csvData: any;
  jsonData: any;
  textData: any;
  worksheet: any;
  arrData: any;

  constructor() {
  }

  ngOnInit() {
  }

  uploadedFile(evt: any) {
    const target: DataTransfer = (evt.target) as DataTransfer;

    const reader: FileReader = new FileReader();

    reader.onload = (e: any) => {
      let bstr: string = e.target.result;

      let wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' });

      let wsName: string = wb.SheetNames[0];

      let ws: XLSX.WorkSheet = wb.Sheets[wsName];

      this.data = (XLSX.utils.sheet_to_json(ws, { header: 1 }));
      console.log('Data: ', this.data);
      this.jsonData = JSON.stringify(this.data);

      console.log('JsonData: ', this.jsonData);

    };

    reader.readAsBinaryString(target.files[0]);
  }

}

从'@angular/core'导入{Component，OnInit，Input，ViewChild，ElementRef}；
从“@angular/material/table”导入{MatTableDataSource}；
从“XLSX”导入*作为XLSX；
出口级波美坦{
项目：字符串；
符号：字符串；
数量：数量；
制造商：字符串；
零件号：字符串；
描述：字符串；
}
@组成部分({
选择器：“应用程序bom表列表”，
templateUrl:“./bom列表.component.html”，
样式URL:['./bom list.component.css']
})
导出类BomListComponent实现OnInit{
数据：[]；
@ViewChild（'bomTable'，{static:false}）bomTable:ElementRef；
//dataSource=新MatTableDataSource（）；
dataSource=新MatTableDataSource（）；
//显示的列：字符串[]=['项目'，'符号'，'数量'，'制造'，'零件号'，'描述']；
显示列：字符串[]=['partNumber'，'mfg'，'desc'，'qty']；
导入文件：文件；
存储数据：任何；
csvData：任何；
jsonData：任何；
文本数据：任何；
工作表：任何；
数据：任何；
构造函数（）{
}
恩戈尼尼特（）{
}
上载文件（evt:any）{
const target:DataTransfer=（evt.target）作为数据传输；
常量读取器：FileReader=newfilereader（）；
reader.onload=（e:any）=>{
让bstr:string=e.target.result；
让wb:XLSX.WorkBook=XLSX.read（bstr，{type:'binary'}）；
让wsName:string=wb.SheetNames[0]；
让ws:XLSX.WorkSheet=wb.Sheets[wsName]；
this.data=（XLSX.utils.sheet_to_json（ws，{header:1}））；
console.log（'Data:'，this.Data）；
this.jsonData=JSON.stringify（this.data）；
log（'JsonData:'，this.JsonData）；
};
reader.readAsBinaryString（target.files[0]）；
}
}

HTML:

  <table>
    <tbody>
      <tr *ngFor="let row of data">
        <td *ngFor="let cell of row">
          {{cell}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="class=" mat-elevation-z8>
    <table mat-table [dataSource]="dataSource" id="bomTable" #bomTable>

      <ng-container matColumnDef="partNumber">
        <th mat-header-cell *matHeaderCellDef> Part Number </th>
        <td mat-cell *matCellDef="let element">{{ element.partNumber }}</td>
      </ng-container>

      <ng-container matColumnDef="mfg">
        <th mat-header-cell *matHeaderCellDef> MFG </th>
        <td mat-cell *matCellDef="let element">{{ element.mfg }}</td>
      </ng-container>

      <ng-container matColumnDef="desc">
        <th mat-header-cell *matHeaderCellDef> Desc </th>
        <td mat-cell *matCellDef="let element">{{ element.desc }}</td>
      </ng-container>

      <ng-container matColumnDef="qty">
        <th mat-header-cell *matHeaderCellDef> QTY </th>
        <td mat-cell *matCellDef="let element">{{ element.qty }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

    </table>
  </div>

{{cell}}
零件号
{{element.partNumber}
制造
{{element.mfg}}
描述
{{element.desc}}
数量
{{element.qty}

发现我需要在xlsx模块中使用raw:true对象作为sheet\u to\u json函数

this.data = (XLSX.utils.sheet_to_json(ws, { raw: true }));

这为我提供了我一直在寻找的数据格式