Angular 2/4/6 показать и скрыть div независимо

Question

Я довольно новичок в Angular, поэтому могу что-то упустить:

Я генерирую несколько строк div с * ngFor. У каждой строки есть кнопка переключения и скрытый вложенный элемент (и вложенные элементы также могут иметь скрытые вложенные элементы).

То, что я хочу попробовать - это показать и скрыть вложенные элементы независимо при нажатии на кнопку переключения (а также должен измениться значок кнопки переключения). Мне удалось заставить его работать либо с одновременным открытием всех 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, чтобы подчеркнуть подраздел

Answer 2

Вам нужен баян попробуйте это:

Вы можете использовать простой 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);
  }

Я думаю, что это должно работать нормально.