[英]How do I map the my JSON data to Angular component .HTML table
I'm trying to map some JSON data to an Angular component.我正在尝试将一些 JSON 数据映射到 Angular 组件。 Here's the data I am trying to use:
这是我尝试使用的数据:
[
{
"P1": [
{
"pc1": "XYZ",
"pn1": "Testp",
"pv1": 123,
"m1": [
{
"mn1": "XYZ",
"ma1": 12,
"mv1": 123456
},
{
"mn1": "Testm",
"ma1": 23,
"mv1": 22565
},
{
"mn1": "Testmn",
"ma1": 34,
"mv1": 234567
}
]
}
]
}
]
And here's the HTML table I am trying to render:这是我试图呈现的 HTML 表:
<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="apiValues">
<thead>
<tr>
<th>PC1</th>
<th>PN1</th>
<th>PV1</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let apiValue of apiValues">
<td> {{ apiValue.pc1 }} </td>
<td> {{ apiValue.pn1 }} </td>
<td> {{ apiValue.pv1 }} </td>
</tr>
</tbody>
</table>
I'm trying to map some JSON data to an Angular component.我正在尝试将一些 JSON 数据映射到 Angular 组件。 Here's the data I am trying to use.
这是我尝试使用的数据。
it looks like most of the code is in place, so it's a little confusing on what the issue is, but I'm going to take a stab at it.看起来大部分代码都已就位,所以对问题所在有点困惑,但我将尝试一下。
... It might be as easy as changing "apiValues" to "P1" ... ??? ...可能就像将“apiValues”更改为“P1”一样简单...... ???
Lets assume we have a component called testComponent, you should have 2 files.假设我们有一个名为 testComponent 的组件,您应该有 2 个文件。 testComponent.ts and testComponent.html.
testComponent.ts 和 testComponent.html。
Since you're referencing a variable called "apiValues" in the HTML file it would assume that there is a public variable in the .ts file called "apiValues" however, it looks like your variable you want to use is called P1 in the json..由于您在 HTML 文件中引用了一个名为“apiValues”的变量,因此它会假设 .ts 文件中有一个名为“apiValues”的公共变量,但是看起来您要使用的变量在 json 中称为 P1 ..
So again, maybe it's as easy as renaming "apiValues" to "P1".再说一次,也许就像将“apiValues”重命名为“P1”一样简单。
Or in the corresponding .ts file you could publicly declare the "apiValues" variable.或者在相应的 .ts 文件中,您可以公开声明“apiValues”变量。
public apiValues: any = [
{
"pc1": "XYZ",
"pn1": "Testp",
"pv1": 123,
"m1": [
{
"mn1": "XYZ",
"ma1": 12,
"mv1": 123456
},
{
"mn1": "Testm",
"ma1": 23,
"mv1": 22565
},
{
"mn1": "Testmn",
"ma1": 34,
"mv1": 234567
}
]
}
]
That way the corresponding .HTML file can access the "apiValues" variable in its template.这样相应的 .HTML 文件就可以访问其模板中的“apiValues”变量。
It worked for me by updating this line to and then I was able to read all the values : let position of positions;通过将此行更新为对我有用,然后我能够读取所有值:让位置位置; let i = index
让 i = 索引
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.