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

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'">

嵌套，例如：

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

显然不起作用。我不是很精通HTML / Angular /（webby-stuff），所以我不确定要用什么Google来找到正确的语法。您如何称呼类似[@detailExpand]的东西？一类方法？一个html方法？ 谢谢

Answer 1

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

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

这将确保，如果您单击已经扩展的元素，它将使expandedElement为空，因此不会扩展任何项目

Here is a fork of the Stackblitz