如何在单击时展开和折叠表格行

【问题标题】：How to expand and collapse table row on click如何在单击时展开和折叠表格行
【发布时间】：2019-07-29 09:38:51
【问题描述】：

我正在从这个example 中学习如何创建一个可扩展的表格。我是一个有角度的新手。我想要做的是，当我单击同一行时，我可以展开该行，当我再次单击同一行时，我可以折叠它。

有什么建议可以添加这个功能吗？

【问题讨论】：

请发布一些代码示例，说明您所做的以及您试图实现但不起作用的内容。
您好，您可以使用手风琴来做到这一点，或者更好地通过定义一个折叠高度的变量来为自己创建一个，该高度将在展开时改变。然后使用内联角度样式来动态控制高度
在 bootsrap 中引用 Collapse...

标签： angular typescript angular-material

【解决方案1】：

在您的(click) 事件中，您只设置expandedElement，因此它将始终被选中。您需要切换该值，以便也可以取消选择该行。

将您的 (click) 函数更改为以下内容

<mat-row *matRowDef="let row; columns: displayedColumns;"
         matRipple 
         class="element-row" 
         [class.expanded]="expandedElement == row"
         (click)="expandedElement = expandedElement === row ? null : row">
</mat-row>

【讨论】：