Question

我刚开始在Angular中工作，所以我可能会忽略一些事情：

我正在使用* ngFor生成多个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

您需要手风琴试试这个：

您可以使用简单的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来强调子部分

角度2/4/6独立显示和隐藏div

2 个答案: