多行内的垫表多行

Question

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

上面的场景是为业务展示多张销售发票。

我已经使用了 Angular 的 Mat Table 来为一行使用多行，这是有效的。但是现在我还必须使第一行（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让它与它一起工作，但恐怕我无法让它与 Material 库一起工作，并且必须定制一些东西。

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

Answer 1

您可以在 Angular 中创建一个两级嵌套的 Mat 表，它可以一次扩展多行。在父网格的每一行上单击，它都会调用 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>

工作堆栈闪电战