Angular 8 嵌套的 ngFor语言 - 单击事件会影响所有其他项目

Question

我有一个图片库。 首先，它迭代一个显示事件详细信息的主要外观，然后迭代嵌套的 NGFOR 以显示照片。它运行良好，唯一的问题是 UI 显示在这个主要"激活"之前 ngfor 的父 ngfor - 因此当用户遍历活动父 ngfor 的子 ngfor 库时，您可以看到图像在其后面的画廊中移动。

是否可以一次只迭代 1 ngfor 子 ngfor，而不会影响父数组中的所有其他项目。 从本质上讲，我需要它们都独立控制和可单击，而无需对后续项目执行相同的单击事件。

<div *ngFor="let c of cards | async; let i=index" >
<div>
<img 
[ngClass]=" ( currentActive() == x ) ? 'active' : 'disabled' "
*ngFor="let h of c.album;  let x=index"
[src]="h"
[attr.data-img]="x"
(click)="togglePhotos(x, c.album.length)" />        
</div>    
</div>

Answer 1

(click)="togglePhotos(x, c.album.length);$event.stopPropagation()"

使用上述点击事件来防止事件冒泡。

您可以在此处找到更多信息