html - Angular 2/4/6 独立显示和隐藏 div

Question

我对使用 Angular 做事还很陌生，所以我可能会忽略一些事情:

我正在使用 *ngFor 生成多个 div 行。每一行都有一个切换按钮和一个隐藏的子 div(子 div 也可以有隐藏的子 div)。

我想尝试做的是在单击切换按钮时独立显示和隐藏子 div(切换按钮图标也应该改变)。我设法让它工作，要么同时打开所有 div，要么在单击一行切换时打开子 div。

但是当我点击另一个时，它会关闭前一个被点击的并打开当前被点击的那个。我正在考虑使用数组，但这只适用于第一层 div，而不适用于嵌套的 div(因为我最初不知道有多少)。

这里是打开的子和子子 div 的一些图示:

rows      rows
>AA       -AA
>BB         >aa
>CC   ->  >BB
>DD       -CC
>FF         -cc
               c
           >DD
           -FF
             >ff

Answer 1

<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来强调子部分