"fixtures" :
[{"hometeam" : Atletico,
"awayteam" : Barca,
"Kickoff: 11:00 ,
"Tournament" : {"tournamentId" : 1001, "Name" : European Cup },
{"hometeam" : Liverpool,
"awayteam" : Real Madrid,
"Kickoff: 20:00,
"Tournament" : {"tournamentId" : 1001, "Name" : European Cup},
{"hometeam" : brasil,"awayteam" : france,"Kickoff: 2:00 am,
"Tournament" : { "tournamentId" : 1002, "Name" : World cup }]
鉴于上述结构,我想使用 Angular Expansion Panel 来 在中显示锦标赛名称 以及面板展开时的固定装置列表。 这将必须按标题上的比赛名称进行分组。
请看预期结果
<mat-expansion-panel *ngFor="let item of fixtures">
<mat-expansion-panel-header style="display:flex" class="mat-row">
<span>{{item.tournament.Name}}</span>
</mat-expansion-panel>
预期结果:
European Cup -- when expand must show as below
1 - Atletico V/s Barca
Kickoff : 11:00 am
2 - Liverpool V/s Real Madrid
Kickoff : 20:00
World Cup
1 - brasil V/s france
kickoff : 2:00 am
什么时候Collapse才会显示
European Cup
World Cup
最佳答案
您可以使用以下按功能分组 (#copied
):
groupItemBy(array, property) {
var hash = {},
props = property.split('.');
for (var i = 0; i < array.length; i++) {
var key = props.reduce(function (acc, prop) {
return acc && acc[prop];
}, array[i]);
if (!hash[key]) hash[key] = [];
hash[key].push(array[i]);
}
return hash;
}
并将其用作:
formatedArray : any[] = [];
this.formatedArray = Object.values(this.groupItemBy(this.fixtures, 'Tournament.Name'));
关于javascript - 扩展面板组标题和迭代子对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56535278/