子組件的 NgClass 未觸發

Question

我有一個用於畫廊輪播的組件，並為它下面的圖像提供導航。 單擊導航波紋管中的圖像應將輪播上顯示的圖像更改為選定的圖像（這可行），並在導航中的選定圖像周圍添加邊框（這不會）。 我嘗試通過 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 但這也不起作用。 我具有相同頁面的類似功能，其中邊框呈現沒有任何問題，並且無需動態更改類列表。 這里的區別在於它不在子組件中。

首先點擊導航中的第四張圖片：

第二次點擊導航中的第四張圖片：

Answer 1

我認為let關鍵字丟失了：

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