如何解决多层排序表在第一次排序后不会扩展到另一个级别
我们一直在将multiTemplateDataRows
用于多层次的mat-table。它的工作正常,我们可以将其扩展到多个级别。虽然,在特定情况下似乎只有一个问题。
场景:
- 一旦应用程序将数据加载到表中,就对1级进行排序
- 单击任意行,它将不会展开
- 再次单击另一行,它将展开。现在,每次点击都会扩展,不再存在问题。
在排序后第一次扩展时,它只是不起作用。
下面是第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已更新。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。