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

在angular2中迭代数组

1 个答案: