动态创建角表 [英] Dynamic creation of table in angular

问题描述

我正在尝试导入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.

推荐答案

使用角度材料表.通过将单行的所有键推入表中，为表生成列数组.即

Use angular-material table. Generate the column array for the table by pushing all the keys of a single row into it. i.e

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() {
         }
        
     }

my-component.component.html

my-component.component.html

<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>

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