arrays - 如何使用Angular将表格数据设置为表格中的特定标题?
问题描述
从 .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;
}
}
文件.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
解决方案
推荐阅读
- vespa - vespa-model-inspect 在 Redhat 7.6 上引发分段错误
- protractor - 使用辅助类中的 this.currentTestState
- r - 参数化查询不适用于 SQL Server 2017
- sql-server - 为什么 DELETE TOP(X) 语句没有删除先前 SELECT TOP(X) 返回的相同记录?
- javascript - 嵌入式视频 (Vimeo) 页面加载优化
- python - 如何将所选元素与行中的总和值相除,对角线 PANDAS 上的值除外
- javascript - 如何从javascript中的函数返回值
- javascript - 返回模式最后一次出现的编号
- node.js - 无法读取日志文件的行
- spring-boot - 如何在没有spring boot gradle插件的情况下在gradle中使用spring boot