如何将已展开的可展开行折叠在有角度的垫子表中

Question

我一直在想如何在角度中单击展开的行时折叠它。我有一页是以类似的方式写的：

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的东西(不是很精通，所以我不知道该用谷歌搜索什么来找到正确的语法。你怎么称呼类似[@detailExpand]的东西？类方法？html方法？感谢

Answer 1

更改点击处理程序，如下所示：

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

这将确保，如果您单击已经展开的元素，它将使expandedElement为空，因此没有项目成为展开的

这是Stacklitz的一个分支