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

【问题标题】：How can I collapse an already expanded expandable row in an angular mat table?如何折叠角垫表中已经展开的可扩展行？
【发布时间】：2018-10-29 07:00:14
【问题描述】：

我一直试图弄清楚当我以角度单击展开的行时如何折叠它。我有一个类似这样写的页面：

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方法？谢谢

【问题讨论】：

[@detailExpand] 指的是在组件的打字稿中定义的动画。
嗨@Faisal。感谢您的回复。是的，我知道它指向那个，但我的意思是它实际上叫什么？它有特定的名称吗？像一个类方法？或类似的东西？

标签： html angular angular-material

【解决方案1】：

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

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

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

Here is a fork of the Stackblitz

【讨论】：

感谢您的帮助！