如何在Angular循环中正确使用ngClass？解决点击样式全局生效问题

问题根源很明确：你用了全局的showFiller变量来控制所有电影的favoris状态，点击任意图标时，这个全局变量的切换会同步影响所有绑定它的电影项，导致所有图标都触发rouge样式。

修复步骤及代码修改： #

1. 移除全局状态变量，单独控制每个电影的收藏状态
   删掉组件里的showFiller变量，直接操作当前点击的电影对象的favoris属性，确保每个电影的状态独立。

2. 修改addFavoris方法
   不需要依赖全局变量，直接切换当前点击电影的favoris值：

export class TemplateListComponent {
  @Input() public films: MovieListe[];
  @Output() public favoris = new EventEmitter<MovieListe>();

  addFavoris(film: MovieListe) {
    // 复制当前电影对象并切换favoris状态
    const updatedFilm: MovieListe = { 
      ...film, 
      favoris: !film.favoris 
    };
    this.favoris.emit(updatedFilm);
  }
}

3. HTML代码简化判断条件
   原来的绑定逻辑本身没问题，只是之前的数据源状态被全局变量干扰了，现在可以简化判断条件：

<div class="image-mosaic">
      <div class="card" *ngFor="let film of films">
            <img [src]="film.img" class="img-style">
            <div class="icon-style">
                <mat-icon (click)="addFavoris(film); $event.stopPropagation()" [ngClass]="{'rouge': film.favoris}">
                    favorite_border
                </mat-icon>
            </div>
        </div>
    </div>

4. 父组件同步更新数据源（关键）
   因为组件是通过@Input接收films数组，所以需要在父组件中处理favoris事件，更新对应电影的状态，保证视图能正确刷新：

// 父组件示例代码
onFavorisUpdated(updatedFilm: MovieListe) {
  // 更新本地数组中的对应电影
  this.films = this.films.map(film => 
    film.id === updatedFilm.id ? updatedFilm : film
  );
  // 可选：把更新同步到json-server
  this.http.put(`/films/${updatedFilm.id}`, updatedFilm).subscribe();
}

修复原理： #

每个电影项的favoris状态不再依赖全局变量，而是各自独立存储在数据源中。点击图标时只修改当前电影的状态，父组件更新数据源后，*ngFor会根据每个电影的独立状态渲染样式，自然就不会出现全选的问题了。

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