angular - 带有 'lazy rendering' 的可扩展行表 - Angular Material

Question

我想在具有可扩展行的 Material 表上实现延迟加载。
仅在单击行后加载展开的数据
示例 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>