我对使用Angular做事情还很陌生，所以我可能会忽略一些事情：
我正在用*ngfor生成多个div行。每一行都有一个切换按钮和一个隐藏的子DIV（子DIV也可以有隐藏的子DIV）。
我想尝试和做的是在点击切换按钮时独立地显示和隐藏子div（同时切换按钮图标也应该改变）。我设法使它工作，要么打开所有的div在同一时间，或当点击一行-切换，它将打开子div。
但当我点击另一个时，它会关闭之前点击的一个，并打开当前点击的一个。我曾考虑使用数组，但这只适用于DIV的第一层，而不适用于嵌套的DIV（因为最初我不知道有多少）。
下面是打开的子Divs和子Divs的一些说明：
rows rows
>AA -AA
>BB >aa
>CC -> >BB
>DD -CC
>FF -cc
c
>DD
-FF
>ff
<div *ngFor="hero of heroes">
{{ hero.name }}
<button (click)="hero.show = !hero.show">show/hide</button>
<div class="sub" *ngIf="hero.show">
more info here
</div>
</div>
添加一些css来强调子部分
你需要手风琴试试这个：
您可以利用简单的CSS，使其变得简单。
HTML
<table class="table">
<tbody>
<tr *ngFor="let game of games; let i = index" [ngClass]="{activetab: isActive(game.label)}">
<div (click)="getSub(game.label);">
<!-- use the uniqueId here -->
<td>{{game.date}}</td>
<td>{{game.label}}</td>
<td>{{game.score}}</td>
</div>
<table>
<tbody [ngClass]="{activetab: isActive(game.label)}">
<tr *ngFor="let subgame of game.sub">
<td>{{subgame.date}}</td>
<td>{{subgame.label}}</td>
<td>{{subgame.score}}</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
CSS
tr .activetab {
display: block !important;
}
TS
isActive(id) {
return this.selected === id;
}
getSub(id) {
//TODO//
this.selected = (this.selected === id ? null : id);
}
我想这应该很管用。
