时间戳

首页 > 解决方案 > 扩展面板组标题和迭代子对象

javascript - 扩展面板组标题和迭代子对象

问题描述

"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 扩展面板在面板展开时显示锦标赛名称和赛程列表。这必须按标题上的比赛名称分组。

请查看预期结果

<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

何时仅显示折叠

European Cup
World Cup

标签： javascriptcssangularbootstrap-4

解决方案

您可以使用以下按功能分组 ( #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'));

Working_Demo

推荐阅读