带动态列名称的嵌套json的角度渲染表ngFor

问题描述 投票:0回答:1

仍然学习Angular(版本8)。我有以下JSON

{layer1 : [
     {
        id: 'lay1',
        name: 'first layer',
        results:
        [
           { rows: [{ col1: '0', description: 'any'}, {col1: '0b', description: 'meh'}] },
           { rows: [{ col1: '1', description: 'some'}] },
        ]
     }
  ]
, layer2: [
     {
        id: 'lay2',
        name: 'second layer'
        results:
        [
           { rows: [{ col1: '7', description: 'more'}] },
           { rows: [{ col1: '8', description: 'none'}] },
        ]
     }
  ]
}

结果应该是这样的表

 <table id='lay1'>
   <tr>
     <td>0 </td>
     <td>any</td>
   </td>
   <tr>
     <td>0b </td>
     <td>meh</td>
   </td>
   <tr>
     <td>1</td>
     <td>some</td>
   </td>
 </table>
 <table id='lay2'>
   <tr>
     <td>7 </td>
     <td>more</td>
   </td>
   <tr>
     <td>8</td>
     <td>none</td>
   </td>
 </table>

注:结果行列可以更改(有时为2列,有时为4列)并更改名称(可以是'col1',但可以是'ident'或任何其他名称)。我已经尝试了几种选择,但是我坚持了这一点。任何帮助,高度赞赏

json angular
1个回答
0
投票

尝试一下-

<table *ngFor='let tableItem of data | keyvalue' [id]='tableItem?.value[0]?.id'>
  <tr *ngFor='let rowItem of tableItem?.value[0]?.results; let rowIndex = index'>
    <td *ngFor='let colItem of rowItem?.rows; let colIndex = index'>
      {{colItem?.col1}}
      {{colItem?.description}}
    </td>
  </tr>
</table>

Working Example

© www.soinside.com 2019 - 2024. All rights reserved.