时间戳

首页 > 解决方案 > 如何折叠角垫表中已经展开的可扩展行？

html - 如何折叠角垫表中已经展开的可扩展行？

问题描述

我一直试图弄清楚当我以角度单击它时如何折叠展开的行。我有一个页面，其编写方式与此类似：

https://stackblitz.com/angular/ygdrrokyvkv?file=app%2Ftable-expandable-rows-example.html（这是来自这里的文档：https ://material.angular.io/components/table/examples ）

基本上，这允许您展开一行并让任何其他展开的行折叠。我希望能够折叠现有的展开行而不展开任何其他行。

我试图弄乱这条线：

<div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">

到嵌套的 if，例如：

 <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? element == expandedElement ? 'collapsed' : 'expanded' : 'collapsed'">

这显然是行不通的。我对 HTML/Angular/(webby-stuff) 不是很精通，所以我不确定用谷歌搜索什么来找到正确的语法。你怎么称呼 [@detailExpand] 之类的东西？类方法？一个html方法？谢谢

标签： htmlangularangular-material

解决方案

像这样更改点击处理程序：

(click)="expandedElement = expandedElement === element ? null : element"

这将确保，如果您单击已展开的元素，它将为expandedElementnull，因此不会展开任何项目

这是 Stackblitz 的一个分支

推荐阅读