打开点击的li's child div

Question

我正在使用 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;
  }

}

如果我点击特定的订单按钮，相应的 child div 需要打开。

例如，这里的列表如下，

订购 1 个按钮订单 2 按钮 . . 订购 5 按钮

当我点击订单 2 按钮时，将显示带有 opened order 2 的文本，所有其他订单；s child div 需要隐藏。这是预期的结果..

但是现在，当我点击特定按钮时，所有 child div 都会打开。

如何在单击按钮时仅打开特定 div 的 child？

KIndly 仅使用纯 javascript 或打字稿 无需查询 .

即可帮助我获得结果

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

Answer 1

在此处查看您的 stackblitz：https://stackblitz.com/edit/open-current-div 实际上，您必须将当前项添加为 openCurrentOrder 函数的参数。此外，在按钮中添加一个字段，以了解当前按钮是否打开。
您需要为每个按钮设置一个变量 isActive。如果不是，则所有按钮都具有相同的 *ngIf 和相同的条件。

Answer 2

我认为您需要向 "items" 对象添加 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;

  }

}

打开点击的li's child div

Open clicked li's child div

html

javascript

toggle

typescript

angular