多层排序表在第一次排序后不会扩展到另一个级别 [英] Multilevel mat-table does not expand to another level after first sort

问题描述

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

We have been using multiTemplateDataRows for multilevel mat-table. Its working fine and we can expand it to multi level. Although, there seems to be one issue in specific scenario.

场景:

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

当我们在排序后第一次扩展时，它只是不起作用.

下面是第1级的HTML:

below is the HTML for level-1:

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

和打字稿:

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

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

We couldn't found any logs or error in console, so not sure what is issue.

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

推荐答案

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

So, I found an answer. We have been trying to find issue in data and sort behavior but issue is animation. Angular Animations setting animation state to void when items are sorted and that what happening.

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

as a solution either remove animation (if you can) else apply following void in animation path.

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已更新.

Stalkblitz already updated.

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

这篇关于多层排序表在第一次排序后不会扩展到另一个级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！