gpt4 book ai didi

html - 在angular2中迭代数组

转载 作者:太空宇宙 更新时间:2023-11-04 02:00:40 25 4
gpt4 key购买 nike

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”

最佳答案

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

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

关于html - 在angular2中迭代数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41825785/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com