打开点击的李的孩子div

时间:2018-09-23 11:13:19

标签: javascript html angular typescript toggle

我正在使用angular 6应用程序,其中列出了一些元素,

HTML:

<ul class="list-unstyled">
    <li *ngFor="let item of items">
        {{item.order}}
        <button (click)="openCurrentOrder()"> open {{item.id}} </button> <br>
        <div class="list-items inner-list-items" *ngIf="isActive">
            opened order {{item.id}}
        </div>
    <br><br><br>
    </li>
</ul>

Ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  items: any = [
    {id: "1",order: "one"},
    {id: "2",order: "two"},
    {id: "3",order: "three"},
    {id: "4",order: "four"},
    {id: "5",order: "five"},
  ]

  isActive: boolean = false;

  openCurrentOrder() {
    console.log("opened");
    this.isActive = true;
  }

}

如果我单击特定的订购按钮,则相应的子div需要打开。

例如,这里的列表如下,

“订单1”按钮 订单2按钮 。 。 订单5按钮

当我单击命令2按钮时,将显示带有opened order 2的文本,并且所有其他命令都必须处于隐藏状态。这是预期的结果。

但是现在当我单击特定按钮时,所有子div都会打开。

如何在单击按钮时仅打开特定div的孩子?

请帮助我仅使用纯JavaScript或打字稿而无需查询

正在工作 stackblitz https://stackblitz.com/edit/angular-llhfhp

2 个答案:

答案 0 :(得分:2)

我认为您需要将isActive:false添加到“项目”对象中。这样,循环就不在所有按钮上,而只在一个id上。 查看我的代码是否对您有帮助:

HTML

    <ul class="list-unstyled">
    <li *ngFor="let item of items">
        {{item.order}}
        <button (click)="openCurrentOrder(item.id)"> open {{item.id}} </button> <br>
        <div class="list-items inner-list-items" *ngIf="item.isActive">
            opened order {{item.id}}
        </div>
    <br><br><br>
    </li>
</ul>

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  items: any = [
    {id: "1",order: "one", isActive: false},
    {id: "2",order: "two", isActive: false},
    {id: "3",order: "three", isActive: false},
    {id: "4",order: "four", isActive: false},
    {id: "5",order: "five", isActive: false},
  ]



  openCurrentOrder(e) {
    console.log("opened");
    this.items[e -1].isActive = true;

  }

}

答案 1 :(得分:1)

在这里查看您的堆叠闪电战:https://stackblitz.com/edit/open-current-div 确实,您必须添加当前项目作为openCurrentOrder函数的参数。此外,在按钮中添加一个字段以了解当前按钮是否打开。
每个按钮都需要有一个变量isActive。如果不是,则所有按钮都具有相同的*ngIf和相同的条件。