html - 以角度显示具有特定数组内容的表格
问题描述
在我的 app.component.ts 中,我创建了数组“data”,它由几个用逗号分隔的字符串组成。
我将它解析为 json 并使用 console.log 我能够以我想要的方式清楚地呈现它:
const jsonData = Papa.parse(content, {skipEmptyLines: true,});
jsonData.data.forEach(function(data){
console.log(data[0], "|" , data[1] , "|" , data[2] , "|" , data[3]);
}
它基本上遍历每一行,然后选择我想要显示的三个数据内容。
我想在我的网站上的 app.component.html 中以这种方式显示数组,但只有前三个条目,因为它有无数个......
我尝试将数据用作 json 元素
<td>{{data.entry1}}</td>
但我没有成功。这是一项非常简单的任务,但我真的被困在这里。谁能解释我为什么不明白?
解决方案
一种简单的方法是创建一个数组来保存您想要显示的数据。
ts
partialData = [];
yourFunction = () => {
:
jsonData.data.forEach(function(column) {
const line = [];
for (let i = 0; i < 4; i++) {
line.push(column[i]);
};
partialData.push(line);
});
}
html
<tr *ngFor="let line of partialData">
<td *ngFor="let column of line">
{{column}}
</td>
</tr>
推荐阅读
- ios - 来自远程源的图像未显示在 iOS 版本的 React Native 应用程序中
- ruby - Ruby - 排列,缺乏输出
- javascript - 使用没有客户端代码 SockJS 的服务器端(Spring WebSocket)
- vue.js - Vuejs 和 vuex,无法读取属性“$store”
- c# - 同一类型的多个可选参数的构造函数选择
- python - 即使已安装,也没有名为“kivy”的模块
- php - 如何在 laravel 中为 rest api 创建一个令牌?
- html - Bootstrap 5 容器在一行中时的行为不同
- vba - VBA 自动关闭消息框 - 不关闭?
- date - 在 SAS 中创建带有日期的宏变量