excel import dynamic use mat-tab-group (sheet)－~

importExcel() {
this.excelService.HttpImportExcel().subscribe(excelData => {
 
this.dataColumnSet(Object.keys(excelData[0]));// 用return data 生成欄位
 
this.excelTabGroupSet(excelData);// set tabGroup
 
this.onTabChange(0);// 將點選的tab 重新 filter
});
}

excelTabGroupSet(data) {
// 用 SHEET_IDX 當作分類
this.excelTabGroup = Array.from(new Set(data.map(x => x.SHEET_IDX))).sort();
}

onTabChange(tabIndex) {
this.currTabIdx = tabIndex;
this.filterData.data = this.excelData.filter(x => x.SHEET_IDX === tabIndex + 1);
this.filterDefaultData(0, this.defaultLimited);
}
 

html

<mat-tab-group (selectedTabChange)="onTabChange($event.index)">
<div *ngFor="let group of excelTabGroup; let index = index">
<mat-tab label="{{group}}">
<div class="excel-dialog mat-elevation-z8">
<mat-table [dataSource]="scrData" (scroll)="onScroll($event)">
<ng-container matColumnDef="{{col}}" *ngFor="let col of dataColumns">
<mat-header-cell *matHeaderCellDef>{{col}}</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row[col] }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="dataColumns"></mat-header-row>
<mat-row *matRowDef="let Row; columns: dataColumns" (click)="selectRow(Row)" [class.active]="Row == selectedRow"></mat-row>
</mat-table>
</div>
</mat-tab>
</div>
</mat-tab-group>