Блог

Я пытаюсь показать результаты для набора матчей в бассейне в Angular 2. Данные выглядят следующим образом:

 Match:
    Team 1
    Team 2
    Games[]

Game
    Player 1
    Player 2
    Racks[]

Rack
  Player 1 Score
  Player 2 Score
  Innings
  Dead Balls
 

Я хотел бы отобразить его в таблице так, чтобы совпадение с двумя названиями команд отображалось в одной строке. Следующая строка должна расшириться так, чтобы каждая строка внутри нее была игрой и показывала все стойки и сводку в конце в горизонтальном расположении. Похоже на:

 Match Date    Team 1 Name    Team 2 Name
    Game 1
      Player 1  P1R1 Score  P1R2 Score P1R3 Score... P1 Total Score
      Player 2  P2R1 Score  P2R2 Score P2R3 Score... P2 Total Score
 

Код, который у меня сейчас есть, таков:

 <table mat-table [dataSource]="matches" class="config-table-full" *ngIf="matches amp;amp; matches.length">
<ng-container matColumnDef="action">
    <th class="icon-column-width" mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let match">
        <button mat-icon-button (click)="onEditMatch(match.id)">
            <mat-icon>edit</mat-icon>
        </button>
        <button mat-icon-button (click)="onDeleteMatch(match.id)">
            <mat-icon>delete</mat-icon>
        </button>
    </td>
</ng-container>
<ng-container matColumnDef="date">
    <th mat-header-cell *matHeaderCellDef>Date</th>
    <td mat-cell *matCellDef="let match" (click)="onMatchClick(match.id)">{{match.matchDate | date}}</td>
</ng-container>
<ng-container matColumnDef="homeTeam">
    <th mat-header-cell *matHeaderCellDef>Home Team</th>
    <td mat-cell *matCellDef="let match">{{match.homeTeamName}}</td>
</ng-container>
<ng-container matColumnDef="visitingTeam">
    <th mat-header-cell *matHeaderCellDef>Visiting Team</th>
    <td mat-cell *matCellDef="let match">{{match.visitingTeamName}}</td>
</ng-container>
<ng-container matColumnDef="MatchDetails">
    <td mat-cell *matCellDef="let match" [attr.colspan]="3">
        <div fxFlex *ngFor="let game of match.games;index as i;" fxLayout="row">
            Game {{1}}
            ??? What do I do here to show the racks horizontally ???
        </div>
    </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="et row; columns: ['MatchDetails']"></tr>
</table>
 

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

Заранее спасибо.