如何将我的 JSON 数据映射到 Angular 组件 .HTML 表

Posted 2023-03-13

【中文标题】如何将我的 JSON 数据映射到 Angular 组件 .HTML 表

【英文标题】：How do I map the my JSON data to Angular component .HTML table

【发布时间】：2021-02-22 01:24:09

【问题描述】：

我正在尝试将一些 JSON 数据映射到 Angular 组件。这是我尝试使用的数据：

[
   
      "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
               
            ]
         
      ]
   
]

这是我要渲染的 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>

我正在尝试将一些 JSON 数据映射到 Angular 组件。这是我正在尝试使用的数据。

【问题讨论】：

你能再解释一下你的问题吗？

也许你只需要使用 JSON.parse(myJsonData); 将 json 转换为 js 对象即可。 ?

【参考方案1】：

看起来大部分代码都已到位，所以问题所在有点令人困惑，但我会尝试一下。

...这可能就像将“apiValues”更改为“P1”一样简单...???

假设我们有一个名为 testComponent 的组件，你应该有 2 个文件。 testComponent.ts 和 testComponent.html。

由于您在 HTML 文件中引用了一个名为“apiValues”的变量，因此它会假定 .ts 文件中有一个名为“apiValues”的公共变量，但是看起来您要使用的变量名为 P1在json中..

再说一遍，也许就像将“apiValues”重命名为“P1”一样简单。

或者在相应的 .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
               
            ]
         
      ]

这样相应的 .HTML 文件就可以访问其模板中的“apiValues”变量。

【参考方案2】：

通过更新这一行来为我工作，然后我能够读取所有值：让位置位置；让 i = 索引