如何将MyJSON数据映射到Angular component.HTML表

我试图将一些JSON数据映射到一个角度组件。以下是我试图使用的数据：

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

PC1
PN1
PV1
{{apiValue.pc1}}
{{apiValue.pn1}}
{{apiValue.pv1}}

---

我试图将一些JSON数据映射到一个角度组件。这是我试图使用的数据。

看起来大部分代码都已准备就绪，所以对于问题是什么有点困惑，但我将尝试一下

。。。这可能和将“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”变量。

它通过将这一行更新为，然后我能够读取所有值：let position of positions；let i=index

您能再解释一下您的问题吗？也许您只需要使用json.parse（myJsonData）将json转换为js对象即可？