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

【问题标题】：Multilevel mat-table does not expand to another level after first sort多级垫表在第一次排序后不会扩展到另一个级别
【发布时间】：2020-12-13 23:12:16
【问题描述】：

我们一直将multiTemplateDataRows 用于多层垫表。它工作正常，我们可以将其扩展到多层次。虽然，在特定情况下似乎存在一个问题。

场景：

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

当我们在排序后第一次展开时它不起作用。

下面是 level-1 的 HTML：

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

和打字稿：

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

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

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

【问题讨论】：

标签： html angular sorting hierarchical-data mat-table

【解决方案1】：

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

作为一种解决方案，要么删除动画（如果可以的话），要么在动画路径中应用以下 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

【讨论】：