时间戳

首页 > 解决方案 > 如何将我的 JSON 数据映射到 Angular 组件 .HTML 表

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

问题描述

我正在尝试将一些 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 组件。这是我正在尝试使用的数据。

标签： htmljsonangulartypescript

解决方案

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

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

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

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

再说一遍，也许就像将“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”变量。

推荐阅读