Панель расширения Группа заголовка и итерации дочернего объекта

Question

"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 }]

Учитывая вышеупомянутую структуру, я хотел бы использовать панель углового расширения, чтобы показать название турнира в и список матчей, когда панель развернется.Для этого нужно сгруппировать по названию соревнования в заголовке.

Пожалуйста, смотрите в ожидаемом результате

<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

Answer 1

Вы можете использовать ниже Группировка по функции (#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