html - 在angular2中迭代数组

Question

enter image description here嗨，我想使用 angular2 迭代以下数组

let list = [{"-1" : [{a : 1, b: 2, c: 2}, {a:3, b: 4, c: 2}]},
            {"0" : [{a : 12, b: 32, c: 22}, {a:31, b: 24, c: 32}}]

然后将输出显示在表格格式中，如图所示

请帮我解决这个问题。

下面是我试过的代码

<table >
<thead>
  <tr>
    <th > a </th>
    <th > b </th>
    <th > c </th>
  </tr>
</thead>
<tbody >
  <tr *ngFor="let element of list">
           <td> {{element['-1'].a}}</td>
           <td> {{element['-1'].b}}</td>
           <td> {{element['-1'].c}}</td>
  </tr>
 </tbody>
 </table> 

但我无法添加行“-1”、“0”

Answer 1

如果您稍微重新格式化数据会更好:

let list = [
  {"-1" : [{a : 1, b: 2, c: 2}, {a:3, b: 4, c: 2}]},
  {"0" : [{a : 12, b: 32, c: 22}, {a:31, b: 24, c: 32}}
]

this.list = list.map(item => {
  const keys = Object.keys(item)
  return {
    header: keys[0],
    data: item[keys[0]]
  }
})

然后你需要用两个循环来渲染它。可能是这样的:

<table>
  <thead>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
    </tr>
  </thead>
  <ng-template ngFor let-item [ngForOf]="list">
    <tbody>
      <tr class="header">
        <td colspan="3">{{ item.header }}</td>
      </tr>
      <tr *ngFor="let row of item.data">
        <td>{{ row.a }}</td>
        <td>{{ row.b }}</td>
        <td>{{ row.c }}</td>
      </tr>
    </tbody>
  </ng-template>
</table>

演示: http://plnkr.co/edit/Q0HAIFO8YAW5EUDJ5p2g?p=preview