ngFor有问题：对于列表中的每一项，我都有一个图像，通过单击，我只想显示该图像的详细信息。2问题是，如果我单击一个图像，列表中所有项的详细信息都会显示出来。
.html文件夹：
<div class=" gif" *ngFor="let r of result">
<img [src]="r.images.downsized.url" alt="image" (click)="getDetails()">
<div class="v3" *ngIf="this.clicked">
<ion-list>
<ion-item>
<ion-label>
<h2>username: {{r?.username}}</h2>
<h3>title: {{r?.title}}</h3>
<p>import date:{{r?.import_datetime}}</p>
</ion-label>
</ion-item>
</ion-list>
</div>
</div>.ts中的值：
ngOnInit() {
this.clicked = false
}
getDetails(): void {
if (!this.clicked) {
this.clicked = true
}
else {
this.clicked = false
}
}
2条答案
按热度按时间hrysbysz1#
this在你的例子中是组件示例，所以this.clicked对于你所有的迭代项都是全局的，这就是为什么所有的迭代项都被显示出来。另一个解决方案是将details部分从循环中移到单独的组件中，该组件将以@Input的形式接收详细信息
rkkpypqq2#
this指的是整个组件，可惜只有一个this.clicked。将
(click)="getDetails()"更改为(click)="getDetails(r)"，然后将
getDetails(): void {转换为类似getDetails(r: TypeOfR): void {的内容，并保留一个数组或散列表，其中单击了Rs。