typescript 如何在Angular中使用JSON数组值填充HTML表？

mbjcgjjk 于 2023-11-20 发布在 TypeScript

关注(0)|答案(3)|浏览(108)

我有一个数组如下：

var publicArray={
"settings": [{
"id": "1",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B1"
},
{
"title": "Comp ",
"value": "C1"
},
{
"title": " Pa Id",
"value": "P1"
}, {
"title": " NPI",
"value": "4535"
}
]
}, {
"id": "2",
"deleted": "0",
"data": [{
"title": " Business Unit",
"value": "B2"
},
{
"title": "Comp ",
"value": "C2"
},
{
"title": " Pa Id",
"value": "P2"
}, {
"title": " NPI",
"value": "34242"
}
]
}]
};

字符串
数组实际上来自数据库，因此它可以扩展，这意味着随着数组的增长，会有更多的行。
我需要填充一个HTML表使用这个数组如下image

。
我是新手，请帮助我。

typescript

来源：https://stackoverflow.com/questions/64962573/how-to-populate-an-html-table-with-json-array-values-in-angular

3条答案

按热度按时间

y3bcpkx11#

有了组件的属性publicArray，你可以通过编写下面的模板来实现：

<table *ngIf="publicArray?.settings?.length && publicArray.settings[0].data?.length">
  <tr>
    <th>ID</th>
    <th *ngFor="let header of publicArray.settings[0].data">{{ header.title }}</th>
  </tr>
  <tr *ngFor="let row of publicArray.settings">
    <td>{{ row.id }}</td>
    <td *ngFor="let col of row.data">
      {{ col.value }}
    </td>
  </tr>
</table>

字符串

Ng-run Example

赞(0）回复(0）举报 2023-11-20

5kgi1eie2#

<table>
  <thead>
    <th>ID</th>
    <th>Business Unit</th>
    <th>Comp</th>
    <th>Pa Id</th>
    <th>NPI</th>
  </thead>
  <tbody>
    <tr *ngFor="let item of data.settings; let i=index">
      <td>{{item.id}}</td>
      <td *ngFor="let item2 of item.data">{{item2.value}}</td>
    </tr>
  </tbody>
</table>

字符串
stackblitz example

的数据