我正在使用 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>
T:
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 按钮时,将显示带有已打开订单 2
的文本,并且所有其他订单的子 div 需要隐藏。这是预期的结果。
但是现在当我点击特定按钮时,所有子 div 都会打开。
如何在单击按钮时仅打开特定 div 的子级?
请帮助我仅使用纯 JavaScript 或 typescript 无需查询即可获得结果。
工作stackblitz https://stackblitz.com/edit/angular-llhfhp
最佳答案
我认为您需要向“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;
}
}
关于javascript - 打开点击的li的子div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52465559/