Angular：使用点击事件显示/隐藏选定的行答案

【问题标题】：Angular: Show/hide selected rows with click eventAngular：使用点击事件显示/隐藏选定的行
【发布时间】：2018-08-09 04:59:36
【问题描述】：

我有一个表格，其中显示了每个选定行的一些数据，如下所示

<table>
    <th>Col-1</th>
    <th>Col-2</th>
    <th></th>
    <tr *ngFor="let obj of data; let i=index">
    <td>{{obj.id}}</td>
    <td>{{obj.name}}</td>
    <button (click)="myFunction(i)">Click</button>
    <br>
    <div>Some dynamic data</div>
    </tr>
</table>

我想仅显示单击行的 div 标记内容，如果单击其他行按钮，则应显示带有 div 的行并隐藏前一个 div。我如何实现这一目标？请推荐

【问题讨论】：

您可以对每一行使用 showRow 布尔属性在它们之间切换

标签： angular

【解决方案1】：

如果您希望“单击”相同，请切换，更改（单击）。

<button (click)="visibleRowIndex!==i?visibleRowIndex=i:null">Click</button>

【讨论】：

【解决方案2】：

一种方法：

在你的组件中，声明一个变量

visibleRrowIndex: number = null;

在你的 html 中

<button (click)="visibleRowIndex=i">Click</button>
    <br>
    <div [hidden]="visibleRowIndex !==i">Some dynamic data</div>

【讨论】：

什么叫切换效果？像动画一样？ OP 只想显示/隐藏行。否则，他可以使用类而不是hidden，并在类上设置 CSS 过渡
这是预期的答案