Angular：使用click事件显示/隐藏选定的行

Question

我有一个表格，我在其中显示每个选定行的一些数据

<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。我该如何实现这一目标？请建议

Answer 1

一种方法：

在组件中，声明一个变量

visibleRrowIndex: number = null;

在你的HTML中

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

Answer 2

如果你想在同一个“点击”，切换，改变（点击）。

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