How to set data of table down to particular heading in Table using Angular?

问题

I have implemented table row, column after reading from .csv files. All data is coming in good way, But after click on heading on table, Data is loading only down to first column. Ideally data show down to respective column. I am sharing some screen shot for the more understanding:

I am using below table:

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' });
  }
}

For functionality wise you can refer mentioned link: https://stackblitz.com/edit/angular-ivy-zuncs7