[英]onClick event of child component is not getting triggered for stacked parent and child component
[英]NgClass of child component not triggered
我有一个用于画廊轮播的组件,并为它下面的图像提供导航。 单击导航波纹管中的图像应将轮播上显示的图像更改为选定的图像(这可行),并在导航中的选定图像周围添加边框(这不会)。 我尝试通过 ngClass 将样式 class 附加到 HTML 元素来添加边框。 我跟踪所选图像的索引,并且在导航中渲染图像时,如果所选图像的索引与渲染图像的索引相同,则添加边框。 但是,我假设元素不会重新渲染,因为在我单击图像后,边框会从前一个图像中删除,并且不会按应有的方式添加到新图像中。 此外,第二次单击同一图像会添加边框(我认为这是子组件再次呈现的时候)。 第一次忽略 ngClass 的问题是什么?
图像导航的 HTML:
<div *ngIf="showImageList" class="product_gallery_images mobile_hidden">
<div *ngFor="let img of imgList; index as index" class="product_gallery_image".
(click)="selectImage(index)">
<img [ngClass]="{'selected_image': selectedImage === index}" src=".
{{img.fields.file.url}}" [id]="index.toString()">
</div>
</div>
选择图像 function:
selectImage(index) {
console.log(document.getElementById(this.selectedImage.toString()).classList);
document.getElementById(index.toString()).classList.add('selected_image');
document.getElementById(this.selectedImage.toString()).classList.remove('selected_image');
this.selectedImage = index;
this.changeImage.changeImage(index.toString());
}
我试图从元素的 classList 中直接添加和删除 class 但这也不起作用。 我具有相同页面的类似功能,其中边框呈现没有任何问题,并且无需动态更改类列表。 这里的区别在于它不在子组件中。
首先点击导航中的第四张图片:
第二次点击导航中的第四张图片:
我认为let
关键字丢失了:
*ngFor="let img of imgList; let index = index"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.