angular - 排序后 Material 表上的可扩展行不起作用

Question

基于Angular Material Table中的样本我在表中添加了可扩展的行和排序。每个功能都具有独特的魅力。但是，当我尝试在表格排序后展开一行时，第一次单击似乎根本没有执行任何操作。第二次单击打开该行并立即再次关闭它。当我再次单击同一行时，它再次表现正常。

这是 stackblitz 上的简化版本:https://stackblitz.com/edit/angular-mnqztk

据我通过日志记录发现，每次点击时都会正确设置 expandedElement 属性，无论表格是否已排序。所以我猜动画触发器 detailExpand 有问题。我只是不明白为什么在表格排序后设置 expandedElement 时它没有被触发。

Answer 1

我偶然发现了this github问题，间接解决了我的问题。使用以下内容代替“Angular Material ”页面上使用的动画:

animations: [
    trigger('expandDetail', [
      state('collapsed, void', style({ height: '0px' })),
      state('expanded', style({ height: '*' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
      transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])

就是这样。问题解决了。