[英]*NgFor toggle show/hide individual element
我有一段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>
和角度代码:
toggle() {
this.show = !this.show;
// CHANGE THE NAME OF THE BUTTON.
if (this.show)
this.buttonName = "Show";
else
this.buttonName = "Hide";
}
它可以正常工作,但是我需要在单击按钮时隐藏该特定的<span>
容器。 我添加了图像来说明我想要做什么,但是当我按下按钮时,它将隐藏所有元素。
在plate
对象中添加一个名为show
的属性,然后根据click
更改值。
<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";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.