Angular 8 Материальная таблица Отображение нескольких уровней вложенных данных в одной таблице

Question

Я пытаюсь отобразить данные с несколькими уровнями вложенности json в Mat-таблицу без особого успеха. Я в основном выполняю итерацию по массиву, и я могу получить значения вложенного массива как: <td mat-cell *matCellDef="let e"> {{e.deployments[0].commitStatus}} </td>

datasource= { 'environments':[{name:"somename", deployments:[{commitsStatus:'done'},{},{}]},{},{}]}

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

  <table mat-table [dataSource]="commit.environments" class="mat-elevation-z8">

        <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

        <!-- Position Column -->
        <ng-container matColumnDef="environmentName">
          <th mat-header-cell *matHeaderCellDef> Env Name </th>
          <td mat-cell *matCellDef="let e"> {{e.environmentName}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="estimatedDeploymentTime">
          <th mat-header-cell *matHeaderCellDef> dep Time </th>
          <td mat-cell *matCellDef="let e"> {{e.estimatedDeploymentTime}} </td>
        </ng-container>
         <!-- Name Column -->
         <ng-container matColumnDef="commitStatus">
            <th mat-header-cell *matHeaderCellDef> Commit Status </th>
            <td mat-cell *matCellDef="let e"> {{e.deployments[0].commitStatus}} </td>
          </ng-container>



        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>