Angular中ngClass未检测数组关联变量变更的问题

核心问题：变量赋值错误 #

你的代码并非Angular未检测到变量变更，而是choosePicture方法中给currentThumbnail赋值时犯了低级错误：

// 错误代码
this.currentThumbnail = this.currentThumbnail[index];

currentThumbnail是单个字符串变量，不是数组，执行this.currentThumbnail[index]会得到undefined。此时所有缩略图的thumb === currentThumbnail判断都不成立，自然没有元素能应用thumb-active类；而原当前图的边框消失，是因为它的匹配条件也失效了。

修复步骤 #

1. 修正赋值语句，从thumbnails数组中取对应索引的缩略图路径：

choosePicture(index: number) {
  this.currentImage = this.images[index];
  this.currentThumbnail = this.thumbnails[index]; // 正确的取值方式
}

2. 移除不必要的this.cd.detectChanges()调用。点击事件属于Angular默认的变更检测触发场景，属性修改后Angular会自动更新视图，无需手动触发检测。

验证效果 #

修复后，点击缩略图时：

• currentThumbnail会被设置为对应索引的缩略图路径
• 新选中的缩略图会匹配thumb === currentThumbnail条件，自动加上thumb-active类显示橙色边框
• 原选中的缩略图因匹配条件失效，自动移除thumb-active类

内容的提问来源于stack exchange，提问作者sinan