如何使用Angular将表格数据设置为表格中的特定标题？ [英] How to set data of table down to particular heading in Table using Angular?

问题描述

从.csv文件读取后，我已经实现了表格的行，列。所有数据都以良好的方式输入，但是单击表标题后，数据仅加载到第一列。理想情况下，数据显示到相应的列。我正在分享一些屏幕快照，以进一步理解：

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:

我正在使用下表：

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

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

推荐答案

假定您可以执行条件CSS来隐藏不需要的样式

Assuming you can do conditional CSS to hide unwanted styles

请参阅以下内容

https://stackblitz.com/edit/angular-ivy-ubcknl

CSS处理版本

https://stackblitz.com/edit/ angular-ivy-ubcknl

这篇关于如何使用Angular将表格数据设置为表格中的特定标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！