打开点击李的孩子 div

Question

我正在使用角度6应用程序，其中列出了一些元素，

目录：

<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>

嗡：

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都被打开了。

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

KIndly 帮助我仅使用纯 javascript 或打字稿而无需查询即可获得结果。

工作堆栈闪电战https://stackblitz.com/edit/angular-llhfhp

Answer 1

我认为您需要在"项目"对象中添加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;
}
}

Answer 2

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