我有一段 HTML 代码:
<!-- Toggle show hide -->
<ng-container *ngFor="let plate of plates; let i=index">
<button (click)="toggle(plate)">{{i}}. {{ buttonName }}</button>
<span *ngIf="!show">
<i>{{i}}</i>
<h1>{{ plate.PlateNumber }}</h1>
</span>
</ng-container>
和 Angular 代码:
toggle() {
this.show = !this.show;
// CHANGE THE NAME OF THE BUTTON.
if (this.show)
this.buttonName = "Show";
else
this.buttonName = "Hide";
}
它工作正常,但我需要当我单击按钮时它隐藏特定的 <span>
容器。我添加了图像来说明我想要做什么,但是当我按下按钮时,它会隐藏所有元素。
最佳答案
在 plate
对象中添加一个名为 show
的属性,然后根据点击
更改值。
<ng-container *ngFor="let plate of plates; let i=index">
<button (click)="toggle(plate)">{{i}}. {{ buttonName }}</button>
<span *ngIf="!plate.show">
<i>{{i}}</i>
<h1>{{ plate.PlateNumber }}</h1>
</span>
</ng-container>
toggle(plate) {
plate.show = !plate.show;
// CHANGE THE NAME OF THE BUTTON.
if (plate.show)
this.buttonName = "Show";
else
this.buttonName = "Hide";
}
关于javascript - *NgFor 切换显示/隐藏单个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53706339/