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

问题

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

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>

function for changing the photos on click is

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

回答1:

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

this.activeFoto

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.

来源：https://stackoverflow.com/questions/59647496/parent-ngfor-has-a-child-ngfor-with-a-gallery-clicking-the-image-affects-all