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

问题描述

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

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

我发现了一个有类似问题的问题:类似问题 但是我没有选项卡，所以提到的解决方案不能应用于我的问题，从根本上我不知道为什么该解决方案有效.

将可扩展行添加到表格的代码片段:

<td mat-cell *matCellDef="let element";[attr.colspan]=displayedColumns.length"><div [@detailExpand]="element === expandElement ?'展开':'折叠'><div>可扩展行的详细信息请点击此处</div>

</td></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns;粘性:真"></mat-h​​eader-row><mat-row *matRowDef="let row;列:显示列"(点击)=切换(行)；展开元素 = 展开元素 == 行 ?空:行"[class.element-expanded-row]=expandedElement == element"；class="clickable-row element-row"></mat-row><mat-row *matRowDef="let row;列:['expandedDetail'];"[@detailExpand]="row === expandElement ?'展开':'折叠'></mat-row></mat-table>

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

expandedElement: 任何;

还有，当我回到页面时，我观察到的另一种行为是，我必须单击该行两次才能关闭它，这意味着折叠和打开该行 (element === expandElement) 的条件仅满足该行可见当我回到页面时.

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

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

解决方案

这个问题 描述了同样的问题.基本上排序会破坏动画.在我的情况下，如果我关闭排序动画效果很好.

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

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>

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

expandedElement: any;

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?

Edit :

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.

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

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