Я реализовал строку таблицы, столбец после чтения из файлов .csv. Все данные поступают в хорошем состоянии, но после щелчка по заголовку таблицы данные загружаются только до первого столбца. В идеале данные отображаются в соответствующем столбце. Я делюсь снимком экрана для лучшего понимания: 
Я использую таблицу ниже:
https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
app.component. html
<div class="content" role="main">
<div class="container">
<table class="table customers table-striped" id="customers">
<tr>
<th *ngFor="let item of headers" (click)="headerSeleced(item)" style="cursor:pointer">{{item}}</th>
</tr>
<tr>
<ng-container *ngFor="let item of data | keyvalue">
<ng-container *ngIf="selectedHeader == item.key">
<td>
<div *ngFor="let prop of item.value">{{prop}}</div>
</td>
</ng-container>
</ng-container>
</tr>
</table>
</div>
</div>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FileService } from './services/file.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'temp-app';
public headers = [];
public data = {};
public selectedHeader = null;
constructor(private fileSvc: FileService) {
}
ngOnInit(): void {
this.fileSvc.getHeaders().subscribe(
data => {
if (data != null && data.length > 0) {
let headers = data.split('\n');
headers = headers.filter(x => x.trim() !== '');
for (const item of headers) {
this.headers.push(item.trim());
}
} else {
this.headers = [];
}
}
);
this.fileSvc.getData().subscribe(
data => {
if (data != null && data.length > 0) {
const tempData = data;
let rows = [];
rows = tempData.split('\n');
for (let row of rows) {
if (row.trim() === '') {
continue;
}
row = row.replace('\r', '')
const rowSplits = row.split(',');
this.data[rowSplits[0]] = rowSplits;
}
} else {
this.data = {};
}
});
}
headerSeleced(header) {
this.selectedHeader = header;
}
}
file.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class FileService {
constructor(private httpClient: HttpClient) {
}
public getHeaders() {
return this.httpClient.get('assets/header.csv', { responseType: 'text' });
}
public getData() {
return this.httpClient.get('assets/tableContent.csv', { responseType: 'text' });
}
}
Для функциональности вы можете обратиться по указанной ссылке: https://stackblitz.com/edit/angular-ivy-zuncs7