单击特定行时显示带有多行详细信息的垫子表

Question

我是Angular的新手，我使用Angular 7来开发任务，我有一个数据模型，其中每个客户都有多辆车.. 我正在从API接收具有以下格式的JSON对象

，其中包含一个属性Vehicles，由该客户拥有的所有车辆组成的数组

我创建了一个垫子表来显示客户，但是我尝试了垫子表扩展行来显示车辆，但没有用，我认为它只能显示一行，但我不确定

我希望用户能够单击“客户”行，这将依次显示该客户的车辆列表

这是表格的代码

export class VehiclesComponent implements OnInit {

  displayedColumns: string[] = ['customerId', 'customerName','customerAddress'];
  data: customer_vehicle[] = [];
  isLoadingResults = true;
  dataSource: MatTableDataSource<customer_vehicle>;
  
  constructor(private api: ApiService) 
  {

  }
  ngOnInit() {
    this.api.getVehicles()
    .subscribe(res => {
      this.data = res;
      console.log(this.data);
      this.dataSource = new MatTableDataSource(this.data);
      this.isLoadingResults = false;
    }, err => {
      console.log(err);
      this.isLoadingResults = false;
    });
    console.log(this.dataSource);
   
  }
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

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

      <table mat-table [dataSource]="dataSource" multiTemplateDataRows 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" -->
            
      <ng-container matColumnDef="customerId">
       <th mat-header-cell *matHeaderCellDef>Customer ID</th>
       <td mat-cell *matCellDef="let row">{{row.customerId}}</td>
       </ng-container>
      <ng-container matColumnDef="customerName">
        <th mat-header-cell *matHeaderCellDef>Customer Name</th>
        <td mat-cell *matCellDef="let row">{{row.customerName}}</td>
      </ng-container>

      <ng-container matColumnDef="customerAddress">
        <th mat-header-cell *matHeaderCellDef>Address</th>
        <td mat-cell *matCellDef="let row">$ {{row.customerAddress}}</td>
      </ng-container>
    

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      
    <td mat-cell *matCellDef="let row; let i = index">{{i}}</td>
    </table>
    <mat-card *ngIf="isLoading" 
   style="display: flex; justify-content: center; align-items: center">
  <mat-progress-spinner 
    color="primary" 
    mode="indeterminate">
  </mat-progress-spinner>
</mat-card>

有人对如何做到这一点有建议，我希望客户行充当切换