当我重新路由到带有表格的页面时，行在 Angular 8 材料表中自动扩展，并带有可扩展的行

Question

我有一个带有材料表的页面。该表具有自定义数据源，因为分页是服务器端。它还有一个复选框列。表格中的行是可扩展的。

问题：在我转到其他页面并再次重新路由到上述页面之前，可扩展行工作正常。当我重新路由回页面时，许多行会自动处于展开状态。

我发现了一个类似问题的问题：Similar problem 但是我没有选项卡，所以提到的解决方案不能应用于我的问题，而且从根本上说我不确定为什么该解决方案有效。

将可扩展行添加到表中的代码 sn-p：

<ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
        <div [@detailExpand]="element === expandedElement ? 'expanded' : 'collapsed'">
         <div>Expandable row details go here</div>
        </div>
      </td>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"
      (click)="toggle(row); expandedElement = expandedElement == row ? null : row"
      [class.element-expanded-row]="expandedElement == element" class="clickable-row element-row">
    </mat-row>
    <mat-row *matRowDef="let row; columns: ['expandedDetail'];"
      [@detailExpand]="row === expandedElement ? 'expanded' : 'collapsed'">
    </mat-row>
  </mat-table>

在 TS 文件中，我有一个变量，我在 ngOnInit 上将其重置为 null：

expandedElement: any;

另外， 当我回到页面时，我观察到的另一种行为是我必须单击该行两次才能关闭它，这意味着折叠和打开该行的条件（元素 === 扩展元素）只要该行可见就满足了当我回到页面时。

有人知道可能是什么问题吗？

编辑：

角度材料页面上的expandable table example 不必使用 [@detailExpand] 用于展开详细信息 mat-row 但是我必须使用，否则我会在 2 行数据之间看到一个空行。为什么这样？它与这个问题有什么关系吗？

 <mat-row *matRowDef="let row; columns: ['expandedDetail'];"
      [@detailExpand]="row === expandedElement ? 'expanded' : 'collapsed'">
    </mat-row>

Answer 1

默认情况下，标签内容是预先加载的。
急切加载的选项卡将初始化子组件，但在激活选项卡之前不会将它们注入 DOM。

如果标签页包含多个复杂的子组件，或者标签页的内容在初始化时依赖于 DOM 计算，建议延迟加载标签页的内容。
（可扩展表格基于 DOM 计算）

可以通过在具有 matTabContent 属性的 ng-template 中声明正文来延迟加载选项卡内容。

在https://material.angular.io/components/tabs/overview中搜索延迟加载

编辑
我不知道您要做什么，但是角度的简单可扩展表是这样的：

<table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <!-- 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'">
        <div class="example-element-description">
         here the data you want to display
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky:'true'"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"
      class="example-element-row"
      [class.example-expanded-row]="expandedElement == element"
      (click)="toggle(row); expandedElement = expandedElement === row ? null : row">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

详情展开

这用于触发动画

@Component({
  selector: "table-expandable-rows-example",
  styleUrls: ["table-expandable-rows-example.css"],
  templateUrl: "table-expandable-rows-example.html",
  animations: [
    trigger("detailExpand", [
      state("collapsed", style({ height: "0px", minHeight: "0" })),
      state("expanded", style({ height: "*" })),
      transition(
        "expanded <=> collapsed",
        animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")
      )
    ])
  ]
})

Answer 2

issue 描述了同样的问题。基本上排序会中断动画。在我的情况下，如果我关闭动画排序也可以正常工作。

最终解决方案：使用带有 CSS 动画的 ngClass。从以下答案中得到解决方案：https://stackoverflow.com/a/65198370/1711670。