多层排序表在第一次排序后不会扩展到另一个级别

问题描述

我们一直在将multiTemplateDaTarows用于多层次的mat-table。它的工作正常，我们可以将其扩展到多个级别。虽然，在特定情况下似乎只有一个问题。

场景：

1. 一旦应用程序将数据加载到表中，就对1级进行排序
2. 单击任意行，它将不会展开
3. 再次单击另一行，它将展开。现在，每次点击都会扩展，不再存在问题。

在排序后第一次扩展时，它只是不起作用。

下面是第1级的HTML：

<table mat-table #outerSort="matSort" [dataSource]="dataSource" multiTemplateDaTarows class="mat-elevation-z8" matSort>

和打字稿：

@ViewChild('outerSort',{ static: true }) sort: MatSort;

我们在控制台中找不到任何日志或错误，所以不确定是什么问题。

这是相同的https://stackblitz.com/edit/angular-nested-mat-table-expand-issuw-when-sort

解决方法

所以，我找到了答案。 我们一直试图在数据和排序行为中查找问题，但问题是动画。 Angular Animations可以在对项目进行排序以及发生的事情时将动画状态设置为void。

作为解决方案，请删除动画（如果可以的话），否则在动画路径中应用以下void。

trigger("detailExpand",[
      state(
        "collapsed,void",style({
          height: "0px",visibility: "hidden"
        })
      ),state(
        "expanded",style({
          "min-height": "48px",height: "*",visibility: "visible"
        })
      ),transition(
        "expanded <=> collapsed,void <=> *",animate("225ms cubic-bezier(0.4,0.0,0.2,1)")
      )
    ])

Stalkblitz已更新。

参考：https://github.com/angular/components/issues/13835