将 XLS(x) 数据转换为 Angular Material 数据 Table

Question

我正在做一个项目，我需要从 Excel 电子表格（最终是多个工作表）导入数据，我想在 Angular Material 数据[=44] 中显示数据=].

我可以使用 npm - xlsx 模块将 Excel 数据作为 csv、json、html 或文本加载到我的组件中。
我的 HTML 页面工作正常，但任何传递数据的尝试都会给我一个空白 table。数据没有按照 mat-table 读取数据的方式正确排列。我确实有一个标准的 HTML table 可以正常工作并正确显示数据，但我确实需要来自 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", …}

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

这是我的 angular 组件 read/parse 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]);
  }

}

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>

Answer 1

发现我需要为 xlsx 模块中的 sheet_to_json 函数使用 raw: true 对象。

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

这为我提供了我正在寻找的数据格式。

将 XLS(x) 数据转换为 Angular Material 数据 Table

Convert XLS(x) data to Angular Material Data Table

excel

angular

angular-material2

mat-table