Mat-table 多行内多行

Posted 2023-02-19

【中文标题】Mat-table 多行内多行

【英文标题】：Mat-table multiple row within a multiple row

【发布时间】：2019-11-04 06:05:35

【问题描述】：

我想要的内容如下图所示。我使用 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 让它工作，但恐怕我无法让它与材料库一起工作，并且必须定制一些东西。

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

【问题讨论】：

您找到解决方案了吗？

【参考方案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