将 XLS(x) 数据转换为 Angular Material 数据 Table
Convert XLS(x) data to Angular Material Data Table
我正在做一个项目,我需要从 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>
发现我需要为 xlsx 模块中的 sheet_to_json 函数使用 raw: true 对象。
this.data = (XLSX.utils.sheet_to_json(ws, { raw: true }));
这为我提供了我正在寻找的数据格式。
我正在做一个项目,我需要从 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>
发现我需要为 xlsx 模块中的 sheet_to_json 函数使用 raw: true 对象。
this.data = (XLSX.utils.sheet_to_json(ws, { raw: true }));
这为我提供了我正在寻找的数据格式。