javascript - 子组件的 NgClass 未触发

Question

我有一个用于画廊轮播的组件，并为它下面的图像提供导航。单击导航波纹管中的图像应将轮播上显示的图像更改为选定的图像（这可行），并在导航中的选定图像周围添加边框（这不会）。我尝试通过 ngClass 将样式类附加到 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>

选择图像功能：

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 中添加和删除类，但这也不起作用。我具有相同页面的类似功能，其中边框呈现没有任何问题，并且无需动态更改类列表。这里的区别在于它不在子组件中。

首先点击导航中的第四张图片：

第二次点击导航中的第四张图片：

标签： javascriptangular

Answer 1

我认为let缺少关键字：

*ngFor="let img of imgList; let index = index"