首页 > 解决方案 > 以角度显示具有特定数组内容的表格

问题描述

在我的 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>

但我没有成功。这是一项非常简单的任务,但我真的被困在这里。谁能解释我为什么不明白?

标签: htmlarraysangular

解决方案


一种简单的方法是创建一个数组来保存您想要显示的数据。

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>

推荐阅读