动态创建角表

问题描述

我正在尝试导入Excel工作表并以表格格式显示它，我的意思是我想根据角度上传的Excel工作表动态创建表格.例如，在上传工作表时，我以数组形式获取数据，

I'm am trying to import excel sheet and display it in tabular format, i mean i wants to dynamic creation of table as per the excel sheet uploaded in angular. for example,on uploading sheet i get the data in the form of array,

0:{
Name: "Ram"
Grade: "A"
Roll No: "10001"
Address: "ABC"
Sr No: 1
}
1:
{
Name: "Sam"
Grade: "B"
Roll No: "10002"
Address: "xyz"
Sr No: 2
}

在上传时，我得到了以上数据.但是我怎么能用这些标题动态地形成表格.如果我上载具有不同字段的某些数据的不同Excel，则会进行相应设置.我知道上传功能.请帮助我进行表格整理.

On uploading i get the above data. but how can i forms table dynamically with these header.if i upload different excel with some data with different fields will set accordingly.i know upload functionality. please help me in table formation.

推荐答案

my-component.component.ts

my-component.component.ts

    import { Component, OnInit } from '@angular/core';
    import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';

     @Component({
        selector: 'blank',
        templateUrl: './blank.component.html',
        styleUrls: ['./blank.component.scss']
      })
     export class MyComponent implements OnInit {
        yourColumns: string[] = [];
        data: any[] = data_array_from_your_file;
        dataSource: any = new MatTableDataSource(this.data);

        constructor() {
         for(let i=0; i < this.data.length; i++) {
           let row = this.data[i];
           for(let key of Object.keys(row)) {
            this.yourColumns.push(key);
           }
           break; //one row is enough to be used as a reference assuming the dataset is uniform
        }

         ngOnInit() {
         }

     }

<div>
            <table [dataSource]="dataSource" mat-table matSort>

              <!-- Column -->
              <ng-container *ngFor="let tColumn of yourColumns" matColumnDef="{{tColumn}}">
                <th *matHeaderCellDef mat-header-cell mat-sort-header> {{tColumn}}</th>
                <td *matCellDef="let row" mat-cell> {{row[tColumn] }} </td>
              </ng-container>

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

这篇关于动态创建角表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！