Mat-table 多行内多行

Question

我想要的内容如下图所示。我使用 Angular Material (7.x) 并使用 Mat-Table 实现，如下所述：https://material.angular.io/components/table/overview

以上场景是为企业展示多张销售发票。

我已经使用 Mat Table of Angular 将多行用于一行，这很有效。但现在我还必须让第一行（A 型）在多行表中具有多行。

我对如何使其发挥作用有一些想法，但我不想开始并事先知道解决方案是否有效。

我开始迭代 salesInvoices 中的对象：

  <tr mat-header-row *matHeaderRowDef="displayedPurchaseInvoiceColumns"></tr>
  <ng-container *ngFor="let item of invoices.salesInvoice">
    <tr mat-row class="table-first-row" *matRowDef="let row; columns: displayedSalesInvoiceColumns"></tr>
  </ng-container>
  <tr mat-row class="table-second-row" *matRowDef="let row; columns: displayedPurchaseInvoiceColumns"></tr>

这并没有显示任何有用的信息。我认为它甚至没有做任何事情，因为我只看到显示的购买发票，而不是销售发票。

我正在考虑在第一行使用垫表？我不知道我是怎么做到的，我也不确定这是否可行。

我真的很想用Mat-Table 让它工作，但恐怕我无法让它与材料库一起工作，并且必须定制一些东西。

欢迎任何帮助！如果我需要提供更多信息，请告诉我。

Answer 1

您可以在 Angular 中创建一个两级嵌套的 Mat-table，它可以一次扩展多行。在父网格中单击每一行时，它会调用 API 并加载内部网格的数据。

组件代码：

ngOnInit() {
    this.tableService.getData().subscribe(res => {
      if (res.length == 0) {
        this.panelDataSource = new MatTableDataSource();
      } else {
        console.log(res);
        this.panelDataSource = new MatTableDataSource(res);
      }
    });
  }

  getDetails(element: any) {
    
    this.tableService.getInnerData(element.Id).subscribe(res => {
      if (res.length == 0) {
        element['innerDatasource'] = new MatTableDataSource();
      } else {
        
        element['innerDatasource'] = new MatTableDataSource(res);
      }
    });
  }
}

HTML 代码：

<table mat-table [dataSource]="panelDataSource" multiTemplateDataRows matSort>
    <ng-container [matColumnDef]="column" *ngFor="let column of columnsToDisplay">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell (click)="getDetails(element)" *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
            <div class="example-element-detail" [@detailExpand]="element?.expanded" *ngIf="element?.expanded">
                <div style="width: 100%;">

                    <table mat-table [dataSource]="element.innerDatasource" multiTemplateDataRows matSort>
                        <ng-container matColumnDef="{{innerColumn}}" *ngFor="let innerColumn of innerDisplayedColumns">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{innerColumn}} </th>
                            <td mat-cell *matCellDef="let address"> {{address[innerColumn]}} </td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
                        <tr mat-row *matRowDef="let address; columns: innerDisplayedColumns;"
                            [class.example-element-row]="address.comments?.length" [class.example-expanded-row]="address?.expanded"
                            (click)="address.expanded = !address?.expanded">
                        </tr>
                    </table>
                </div>
            </div>
        </td>
    </ng-container>

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

工作Stackblitz