当我重新路由到带有表格的页面时，行在Angular 8材质表中自动展开，具有可扩展的行 [英] Rows automatically expanding in Angular 8 material table with expandable rows when I reroute to the page with the table

问题描述

我有一个带有材料表的页面.该表具有自定义数据源，因为分页是服务器端的.它还具有一个复选框列.表中的行是可扩展的.

I have a page with a Material table. The table has a custom data source since pagination is server side. It also has a check box column. The rows in the table are expandable.

问题:可扩展行可以正常工作，直到我转到其他页面并再次重新路由到上一页为止.当我重新路由回页面时，许多行会自动处于展开状态.

Problem: The expandable rows work fine until I go to some other page and reroute to the above page again. When I reroute back to the page many rows are in expanded state automatically.

我发现了一个类似问题的问题:

I found one question with a similar issue : Similar problem However I don't have tabs so the solution mentioned can't be applied to my problem and fundamentally I am not sure why the solution works.

将可扩展行添加到表中的代码段

Code snippet which adds the expandable row to the table:

<ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
        <div [@detailExpand]="element === expandedElement ? 'expanded' : 'collapsed'">
         <div>Expandable row details go here</div>
        </div>
      </td>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"
      (click)="toggle(row); expandedElement = expandedElement == row ? null : row"
      [class.element-expanded-row]="expandedElement == element" class="clickable-row element-row">
    </mat-row>
    <mat-row *matRowDef="let row; columns: ['expandedDetail'];"
      [@detailExpand]="row === expandedElement ? 'expanded' : 'collapsed'">
    </mat-row>
  </mat-table>

在TS文件中，我有一个变量，该变量在ngOnInit上重置为null:

In the TS file I have a variable which I reset to null on ngOnInit:

expandedElement: any;

另外，回到页面时，我观察到的另一行为是我必须单击该行两次以将其关闭，这意味着折叠并打开该行的条件(元素=== ExpandedElement)仅在该行可见的情况下就得到了满足.当我回到页面时.

Also, One more behavior that I observed when I come back to the page was that I have to click the row twice to close it which means the condition to collapse and open the row (element === expandedElement) is satisfied just that the row is visible when I come back to the page.

有人知道这可能是什么问题吗?

Does any one has any clue what may be the problem?

角度材料页面上的可扩展表格示例[@detailExpand]用于展开详细资料行，但是我必须使用否则，我会看到两行数据之间有一个空行.为什么这样?它与该问题有关系吗?

The expandable table example on angular materials page doesn't have to use [@detailExpand] for the expand detail mat-row however I have to use otherwise I see a empty row in between 2 rows of data. Why so? Does it have to do anything with this problem?

 <mat-row *matRowDef="let row; columns: ['expandedDetail'];"
      [@detailExpand]="row === expandedElement ? 'expanded' : 'collapsed'">
    </mat-row>

推荐答案

此问题描述了相同的问题.基本上，排序会中断动画.就我而言，如果我关闭了动画的排序，效果也很好.

This issue describes the same problem. Basically Sorting breaks animation. In my case as well if I turn off sorting the animation works fine.

最终解决方案:将ngClass与CSS动画一起使用.从以下答案获得了解决方案: https://stackoverflow.com/a/65198370/1711670 .

Final solution : Use ngClass with CSS animations. Got the solution from the following answer : https://stackoverflow.com/a/65198370/1711670.

这篇关于当我重新路由到带有表格的页面时，行在Angular 8材质表中自动展开，具有可扩展的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！