Dynami c создание таблицы в angular

Question

Я пытаюсь импортировать лист Excel и отобразить его в табличном формате, я имею в виду, что хочу динамически c создать таблицу в соответствии с листом Excel, загруженным в angular. например, при загрузке листа я получаю данные в виде массива,

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 с некоторыми данными с разными полями, будет установлено соответственно. я знаю функцию загрузки. пожалуйста, помогите мне в формировании таблицы.

Answer 1

Попробуйте этот простой метод ..

.ts

tableObj = [{
      Name: "Ram",
      Grade: "A",
      RollNo: "10001",
      Address: "ABC",
      SrNo: 1
      },{
      Name: "Sam",
      Grade: "B",
      RollNo: "10002",
      Address: "xyz",
      SrNo: 2
      }];

headers = [];

ngOnInit() {
    this.tableObj.map((item) => {
       this.headers = Object.keys(item);
    })
 }

getData(item) {
  return Object.keys(item);
}

. html

 <table border="1">
      <tr>
         <th *ngFor="let header of headers"> {{header}} </th>
      </tr>
      <tr *ngFor="let item of tableObj">
         <td *ngFor="let data of getData(item)"> {{item[data]}} </td>
      </tr>
 </table>

Answer 2

Используйте angular -таблицу материалов. Сгенерируйте массив столбцов для таблицы, вставив в него все ключи одной строки. т.е.

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

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