如何动态生成和显示嵌套的角度材料表答案

【问题标题】：How to Generate and display nested angular material table dynamically如何动态生成和显示嵌套的角度材料表
【发布时间】：2021-10-26 04:43:01
【问题描述】：

我遇到了一种情况，我需要实现用于显示嵌套角垫表的逻辑。我已经实现了使用子元素的数据源显示嵌套（内部）表的逻辑，但是当第三级子项又可以具有嵌套元素时，情况就很棘手了。示例数据如下所示。

到目前为止，我已经为父数据源和子数据源获取数据并使用 mat 表显示，但无法根据从后端服务接收的数据定义在运行时生成子 mat 表的逻辑（在特定行项目上单击）。目前的植入情况如下（这是1级的嵌套垫表）：

  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
      <div class="example-element-detail" *ngIf="element._mdbpartchilds?.length" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <div class="inner-table mat-elevation-z8" *ngIf="expandedElement">

          <table #innerTables mat-table #innerSort="matSort" [dataSource]="element._mdbpartchilds" 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 element"> {{element[innerColumn]}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="innerDisplayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: innerDisplayedColumns;"></tr>
          </table>
        </div>
      </div>
    </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let element; columns: displayedColumns;" [class.example-element-row]="element._mdbpartchilds?.length"
   [class.example-expanded-row]="expandedElement === element" (click)="toggleRow(element)">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>

但是假设子元素还包含一些子子行，应该如何实现逻辑？ 每个级别的数据可以在行或单元格单击上获取数据源将被绑定，但我在这里看到了更新的挑战当新数据到达嵌套表时，整个数据源。

总结项目可能有不可预知的编号。的子项目如果子计数大于 0，则应显示。任何帮助将不胜感激。**

【问题讨论】：

标签： angular angular-material-table angular-material-7

【解决方案1】：

不幸的是，没有找到 mat-table 的解决方案，但我发现 ngx-datatable 一个 Angular 组件在嵌套和动态数据绑定方面似乎非常灵活。如果这有助于任何正在寻找类似功能的人，这里是 GitHub 存储库：https://github.com/swimlane/ngx-datatable，这里是 npm 命令：npm i @swimlane/ngx-datatable --save

【讨论】：