我對 ngFor 有問題：對于串列中的每個專案，我都有一個影像，單擊我想僅顯示該影像的詳細資訊。問題是，如果我點擊一個影像，串列中所有專案的詳細資訊都會出現。
.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
}
}
uj5u.com熱心網友回復：
this在您的情況下是組件實體，因此this.clicked對于您的所有迭代專案都是全域的，這就是為什么所有專案都顯示出來的原因。作為一種解決方案，您可以存盤單擊的索引：
<div class=" gif" *ngFor="let r of result; let i = index">
<img [src]="r.images.downsized.url" alt="image" (click)="clickedIndex = i">
<div class="v3" *ngIf="clickedIndex === i">
<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>
另一種解決方案是將詳細資訊部分從回圈移動到單獨的組件中，該組件將接收詳細資訊作為@Input
uj5u.com熱心網友回復：
該this指整個組件。唉，只有一個this.clicked。
更改(click)="getDetails()"為類似(click)="getDetails(r)"和
getDetails(): void {類似的內容，getDetails(r: TypeOfR): void {并保留一個單擊 Rs 的陣列或哈希圖。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/394480.html
上一篇：在畫布中呼叫函式