父级 *ngfor 有一个带有图库的子级 ngfor - 单击图像会影响所有其他子级 ngfor - 如何仅影响被单击的子级

Question

我有一个 *ngFor 它遍历 50 个成员。这些成员中的每一个都有一个图像库，当您单击图像时，它会循环浏览照片。一切正常，但是样式意味着您可以看到前 3 张会员卡的顶部，因为每张卡的边距为 -10px、-20px、-30px

问题是，当您单击图库时，您可以看到前面的图库在迭代照片，这也是不可取的，我只想迭代当前的顶级活跃成员图库。我已经尝试过阻止事件冒泡的方法，例如 event.stopPropagation((，但它没有任何效果

<div class="item" #mainParent *ngFor="let c of cards | async; trackBy: trackByCards; last as islast; let i=index">  
<div class="content">
<div class="image">
<div class="gallery">
<img 
*ngFor="let h of c.album;  let x=index"
[src]="h"
(click)="changePhoto(x, c.album.length)" />
</div>              
</div>
<div class="titles">
<h1>
{{ c.name }}
</h1>
<h3>
{{ c.city }}
</h3>
</div>
</div>
</div>

单击时更改照片的功能是

/**
* Clicking photo changes the photo to the next one in the array
* when it reaches the end of the album it goes back to the first photo
*/
changePhoto(index: number, albumCount: number) {
if (index < albumCount - 1) {
++index;
} else {
index = 0;
}
this.activeFoto = index;
}

Answer 1

根据我的评论，有一个局部变量，即：

this.activeFoto

由于其本地范围和在HTML中的使用，它正在影响其余的画廊，而不仅仅是打算更改的画廊。