Html 具有相同列的Mat表可扩展行

我有一张桌子，上面有这样一个可展开的行：

基本上，是JSON格式的表示，如下所示：

[
    {
        "id": 17,
        "reference": "108988 (20000626)",
        "invoiced": 2017.32,
        "shipments": [
            {
                "reference": "66000316",
                "invoiced": 77.5
            }
        ],
        "containers": [
            {
                "reference": "40HC CAIU9822509",
                "invoiced": 1939.82
            }
        ]
    }

但目前我面临的一个问题是，发货和集装箱的发票价值没有放在发票列中。下面是我想要实现的一个例子：

很抱歉，我的绘图技巧不好，但我希望2017.32下的

发货。发票
值为77.5，这是发票总价值。我还想对期望值做同样的事情，差值，稍后我将在JSON中为装运和容器添加它

以下是我的.html代码：

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
  <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let invoice"> {{invoice[column]}} </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let invoice" [attr.colspan]="displayedColumns.length">
      <div [@detailExpand]="invoice == expandedElement ? 'expanded' : 'collapsed'">
        <div><br> Shipments:</div>
        <div *ngFor="let shipment of invoice['shipments']">
    <td> {{shipment.reference}} </td>
    <td> {{shipment.invoiced}} </td>
    </div>

    <div><br> Containers:</div>
    <div *ngFor="let container of invoice['containers']">
      <td> {{ container.reference }}</td>
      <td> {{ container.invoiced }}</td>
    </div>
    </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let invoice; columns: displayedColumns;" class="example-element-row"
    [class.example-expanded-row]="expandedElement === invoice"
    (click)="expandedElement = expandedElement === invoice ? null : invoice">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>

<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>


{{column}}
{{发票[列]}

装运：
{{shipping.reference}
{{装运。发票}

容器：
{{container.reference}}
{{container.invoited}}

我尝试过几种方法，但都没有成功，我也不知道这是scss还是html问题