如何以角度循环数据？

Question

我正在尝试使用下面的 json 结构创建下表。

{"status":200,"message":"success","result":{"report":[["SOUTH","ANDHRA-PRADESH","ITR",0.0000,0.0000,null,229.9800,0.0000],
["SOUTH","ANDHRA-PRADESH","OPC",84490.0000,6426.2000,0.0000,7183.7800,77306.0000]
]}}

预期结果::

到目前为止我尝试过的示例代码。非常感谢您的帮助...在此先感谢 https://stackblitz.com/edit/angular-mp1jro?file=src%2Fapp%2Fapp.component.ts

<table style="border:1px solid #CCC">
  <thead>
      <tr>
          <th rowspan="2">Zn</th>
          <th rowspan="2">P Name</th>
        <ng-container *ngFor="let unique of arr">
          <th rowspan="1" colspan="4">{{unique.grade}}</th>
        </ng-container>
      </tr>
      <tr>
          <th>I</th>
          <th>II</th>
          <th>III</th>
          <th>IV</th>
          <th>V</th>
          <th>VII</th>
          <th>VIII</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let hero of result.report;let i = index">
          <td>{{hero[0]}}</td>
          <td>{{hero[1]}}</td>
          <td>{{hero[3]}}</td>
          <td>{{hero[4]}}</td>
          <td>{{hero[5]}}</td>
          <td>{{hero[6]}}</td>
       </tr>
      
  </tbody>
</table>

Answer 1

当 json 与图像没有任何关系时，很难帮助:(。我想你可以像这样改变你的结构

this.data:any[]=[]
this.result.report.forEach(x=>{
   let element=this.data?this.data.find(d=>d.name==x[0] && d.zone==x[1]):null
   if (!element)
   {
       const index=this.data.length;
       this.data.push({name:x[0],zone:x[1]})
       element=this.data[index]
   }
   element[x[2]]=[x[3],x[4],x[5],x[6],x[7]]
})

所以你有一个像这样的对象数组

{name:...,zone:...,ITR:[...],OPC:[...]}

您可以更简单地创建表格