排序后物料表上的可扩展行不起作用

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)'))
    ])

就是这样。问题解决了。