首页 文章

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

提问于
浏览 次
0

我在Angular做新事物是相当新的，所以我可能会忽略一些事情：

我用* ngFor生成多个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
html css angular

2 回答

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

    回复于
  • 0

    你需要手风琴试试这个：

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

    我认为这应该工作正常 .

    回复于

相关问题