Angular 4+Bootstrap：点击后仅修改单个循环面板图标颜色的方法

这个问题很典型——你大概率是用了一个全局变量（比如isFavorited）来控制所有图标的样式，导致点击时所有绑定该变量的图标都会一起变色。要解决这个问题，核心是给每个面板对应的图标单独维护状态，而不是用一个全局开关。下面给你两种可行的解决方案：

方案一：给每个数据项添加独立状态属性 #

这种方法直接给从接口获取的每个商品数据添加一个isFavorited属性，用来标记当前商品是否被收藏（即图标是否变色）。

组件代码（.ts文件） #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  httpdata: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // 模拟从接口获取数据，给每个项添加isFavorited初始状态
    this.http.get('你的接口地址').subscribe((data: any[]) => {
      this.httpdata = data.map(item => ({
        ...item,
        isFavorited: false // 初始状态为未收藏
      }));
    });
  }

  addEvent(productId: number) {
    // 找到当前点击的商品项
    const targetItem = this.httpdata.find(item => item.product_id === productId);
    if (targetItem) {
      // 切换收藏状态
      targetItem.isFavorited = !targetItem.isFavorited;
      // 这里可以添加向后端发送收藏/取消收藏请求的逻辑
    }
  }
}

模板代码（.html文件） #

<div *ngFor="let x of httpdata; let i = index;">
  <div class="panel">
    <div class="panel-body">
      <img src="{{x.product_image}}" height="300px" width="200px">
      {{x.product_name}}<br/>
      <!-- 根据当前项的isFavorited状态绑定样式 -->
      <mat-icon 
        (click)="addEvent(x.product_id)" 
        [ngClass]="{'favorite-active': x.isFavorited}">
        favorite
      </mat-icon>
    </div>
  </div>
</div>

CSS样式（.css文件） #

.favorite-active {
  color: #ff4081; /* 替换成你想要的高亮颜色 */
}

方案二：用数组维护已选中的商品ID #

如果不想修改原始的接口数据，可以在组件里维护一个数组，专门记录已经被收藏的商品ID，通过判断当前商品ID是否在数组中来控制图标样式。

组件代码（.ts文件） #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  httpdata: any[] = [];
  favoritedProductIds: number[] = []; // 存储已收藏的商品ID

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // 从接口获取数据
    this.http.get('你的接口地址').subscribe((data: any[]) => {
      this.httpdata = data;
    });
  }

  addEvent(productId: number) {
    const idIndex = this.favoritedProductIds.indexOf(productId);
    if (idIndex > -1) {
      // 如果ID已存在，移除（取消收藏）
      this.favoritedProductIds.splice(idIndex, 1);
    } else {
      // 如果ID不存在，添加（收藏）
      this.favoritedProductIds.push(productId);
    }
    // 这里可以添加向后端发送请求的逻辑
  }

  // 判断当前商品是否被收藏
  isFavorited(productId: number): boolean {
    return this.favoritedProductIds.includes(productId);
  }
}

模板代码（.html文件） #

<div *ngFor="let x of httpdata; let i = index;">
  <div class="panel">
    <div class="panel-body">
      <img src="{{x.product_image}}" height="300px" width="200px">
      {{x.product_name}}<br/>
      <!-- 通过方法判断是否收藏，直接绑定颜色样式 -->
      <mat-icon 
        (click)="addEvent(x.product_id)" 
        [style.color]="isFavorited(x.product_id) ? '#ff4081' : 'gray'">
        favorite
      </mat-icon>
    </div>
  </div>
</div>

为什么原来的方法会失效？ #

你之前的实现应该是用了一个单一的布尔变量（比如isFavorited: boolean）来控制所有图标的样式，所有面板的图标都绑定了这个变量。当你点击任意一个图标时，这个全局变量的状态改变，导致所有绑定它的图标都跟着变色。而上面的两种方案都是给每个图标单独维护状态，因此只会改变当前点击的那个图标样式。

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