Angular 2/4/6独立显示和隐藏divs

Question

我对使用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

Answer 1

你需要手风琴试试这个：

您可以利用简单的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);
  }

我想这应该很管用。

Answer 2

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