遍历对象数组-* ngFor-Angular 6

时间:2019-09-17 14:25:26

标签: javascript arrays angular object ecmascript-6

有人可以告诉我如何迭代下面的数据结构。 ii。试图加载到普通的引导表中。但失败了。到目前为止,我尝试在for..loop循环内进行for of。但它在“ tableData”上返回 undefined

我知道它的愚蠢和重复的问题。但我找不到解决方法。

{
"parent":{  
      "tableHeading":{  
         "Header1":"ASD",
         "Header2":"QQQ",
         "Header3":"YYY",
         "Header4":"OOO",

      },
      "tableData":[  
         {  
            "Sample_1":"2019-08-19T00:00:00",
            "Sample_2":"Johney",
            "Sample_3":"30",
            "Sample_4":"PA,

         },
         {  
            "Sample_1":"2019-08-19T00:00:00",
            "Sample_2":"Allen P",
            "Sample_3":"29",
            "Sample_4":"SA",

         },
         {  
            "Sample_1":"2019-08-19T00:00:00",
            "Sample_2":"Chris",
            "Sample_3":"28",
            "Sample_4":"MM",

         }
      ]
   }
}

1 个答案:

答案 0 :(得分:1)

尝试这样:

<table border="1">
    <tr>
        <td *ngFor="let head of data.parent.tableHeading |keyvalue">
            {{head.value}}
        </td>
    </tr>
    <tr *ngFor="let item of data.parent.tableData">
        <td *ngFor="let element of item | keyvalue">
            {{element.value}}
        </td>
    </tr>
</table>

Working Demo