Загрузка динамических данных со стороны сервера в таблицу данных угловых материалов

Question

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

Данные с сервера будут выглядеть примерно так: {"columns": ["sex", "age", "address", "famsize"], "rows": [{"sex": "F", "age": 18, "address": "U", "famsize": "GT3"}, {"sex": "F", "age": 17, "address": "U", "famsize": "GT3"}, {"sex": "F", "age": 15, "address"":" U "," famsize ":" LE3 "}, {" sex ":" F "," age ": 15," address ":" U "," famsize ":" GT3 "}, {" sex":" F "," age ": 16," address ":" U "," famsize ":" GT3 "}]}

Компонент HTML :

<mat-table #table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{disCol}}">
    <mat-header-cell *matHeaderCellDef>{{disCol}}</mat-header-cell>
    <mat-cell *matCellDef="let element "> {{element[disCol]}} </mat-cell>
  </ng-container>

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

Компонент :

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DatasetService } from '../../services/dataset.service';
import { DataSource } from '@angular/cdk/table';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.css']
})
export class SummaryComponent implements OnInit {
  id: string;
  dataSource: SummaryDataSource;
  displayedColumns: string[];

  constructor(private route: ActivatedRoute, private datasetSetvice: DatasetService) { }

  ngOnInit() {
    this.id = this.route.snapshot.params['id'];
    // TODO: Not sure how to initialize columns, so setting static value for not
    this.displayedColumns = ['school', 'sex'];
    this.dataSource = new SummaryDataSource(this.datasetSetvice, this.id);
    console.log(this.dataSource);
  }

}

export class SummaryDataSource extends DataSource<any> {
  constructor(private datasetSetvice: DatasetService, private dataset_id: string) {
    super();
  }

  connect(): Observable<any> {
    return this.datasetSetvice.getSummary(this.dataset_id);
  }

  disconnect() { }
}

Service.ts :

getSummary(id: string): Observable<any> {
    return this.http.get(this.rootURL + "/datasets/summary/" + id);
}

Thisне работает, я очень плохо знаком с угловой ... любая помощь очень заметна.