带有“延迟渲染”的可扩展行的表格 - 角材料

Question

我想在具有可扩展行的材料表上实现延迟加载。仅在单击行后加载展开的数据

具有可扩展行的表的示例StackBlitz。

在我的项目中，从主扩展表中，我调用扩展行空间内的另一个组件，该组件呈现一些数据（在扩展行内）。

像这样：

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
           <!--another component load  -->
           <p>
              <app-another-table [fromMainTable] = 'true'></app-another-table>
           </p>
      </div>
    </td>
  </ng-container>

问题是，默认情况下，扩展行内容即使在它们关闭时也会被初始化。相反，我想推迟初始化，直到单击特定行，并且只有与他（单击的行）相关的内容才会加载空间

Answer 1

我希望在我的项目中也是如此。我只是将组件包裹在 ng-container 中并添加了 *ngIf 指令，如下所示。

     <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <ng-container *ngIf="expandedElement === element">
           <!--another component load  -->
           <p>
              <app-another-table [fromMainTable] = 'true'></app-another-table>
           </p>
        </ng-container>
      </div>
    </td>
  </ng-container>