父* ngfor有一个带有图库的子ngfor-单击该图像会影响所有其他子ngfor的-如何仅影响被单击的那个 [英] parent *ngfor has a child ngfor with a gallery - clicking the image affects all other child ngfor's - how to only affect the one being clicked

问题描述

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

I have an *ngFor which iterates through 50 members. Each of these members has an image gallery which when you click on the image loops through the photos. Everything works however the styling means that you can see the top of the 3 previous members cards as the margin on each is -10px, -20px, -30px

问题在于，当您单击图库时，您可以看到前面的图库在照片中进行迭代，这也是不希望的，我只想在当前的顶级活动成员画廊中进行迭代.我已经尝试了一些方法来阻止事件冒泡，例如event.stopPropagation()，但它没有任何作用

The problem is that when you click on the gallery you can see the preceeding galleries iterating through the photos, which is also not desirable, I just want to iterate on the current top level active members gallery. I have tried things to stop event bubbling like event.stopPropagation() but it doesnt have any effect

    <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;
}

推荐答案

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

As per my comment, there was a local variable, namely:

this.activeFoto

由于它在HTML中的本地范围和用法，它影响了其余画廊，而不仅仅是打算改变的画廊.

Due to its local scope and usage in HTML, it was impacting the rest of the galleries, instead of just the one that was intended to change.

这篇关于父* ngfor有一个带有图库的子ngfor-单击该图像会影响所有其他子ngfor的-如何仅影响被单击的那个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！