我有一个项目数组,每个项目都有一个天数。每天都会有多个项目,但我想动态构建一个包含每天列的表。这是我到目前为止的代码。
<table>
<thead>
<th *ngFor="let item of itemList|async">
Day {{item.assignedPeriod.dayNumber}}
</th>
</thead>
</table>
显然,这会为每个项目生成一个新列,而不管当天是否已经看到了前一个项目。我希望它跳过制作一个新的列,如果该列已经存在的一天,并创建一个如果它不存在。
我该怎么办?
您需要在数据上循环并创建一个对象数组。但我可以想象使用异步管道。嗯,你可以使用可观察的映射来转换数据,但我有点懒
Supouse您有如下数据:
data=[{day:1,name:"one",value:100},
{day:1,name:"two",value:200},
{day:2,name:"three",value:300},
{day:1,name:"four",value:400},
{day:3,name:"five",value:500},
{day:2,name:"six",value:600}
]
你可以做一些
array:any[]=[{}]
this.data.forEach(x=>{
let row=0;
while (this.array[row]["day"+x.day])
{
row++
if (!this.array[row])
this.array[row]={}
}
this.array[row]["day"+x.day]=x
})
创建表格就像
<table>
<th *ngFor="let keyPair of array[0]|keyvalue">{{keyPair.key}}</th>
<tr *ngFor="let item of array;let i=index">
<td *ngFor="let keyPair of array[0]|keyvalue">
{{item[keyPair.key]?.value}}
</td>
</tr>
</table>
参见stackblitz