изменить цвет значка после нажатия

Question

Как изменить цвет иконки после клика?в angular 4 с начальной загрузкой я использую значок на панели с циклом * ngfor, он изменяется во всех панелях после щелчка, но он хочет изменить только в одной панели.

app.component.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)" id="fav{{x.product_id}}" [ngStyle]="{ 'color':iconColor}">favorite_border</mat-icon>
      </div>
  </div>
</div>


app.component.ts
export class AppComponent implements OnInit {
iconColor: string = "#000";
constructor(private dataservice:DataserviceService,private global: AppGlobals) {}
httpdata;
ngOnInit() {
this.dataservice.getApparel(this.global.AppUrl +'getRecommendations?client=web&call_tag=stylemachine&size=15&position=0&attempt=0&user=5724&project=2226&collection=200&category=16&client-tag=women_apparels').subscribe(data=>this.httpdata=data);
}
addEvent(x.product_id){
  this.iconColor = 'green';
   console.log(x);
 }
}

Answer 1

app.component.html
enter code here
<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)" id="fav{{x.product_id}}" [ngStyle]="{'color':x.select ?  '#d63872' : '#000'}">favorite_border</mat-icon>
  </div>
</div>
</div>



app.component.ts

export class AppComponent implements OnInit {
constructor(private dataservice:DataserviceService,private global: AppGlobals) {}
httpdata;
ngOnInit() {
this.dataservice.getApparel(this.global.AppUrl +'getRecommendations?client=web&call_tag=stylemachine&size=15&position=0&attempt=0&user=5724&project=2226&collection=200&category=16&client-tag=women_apparels').subscribe(data=>this.httpdata=data);
}
addEvent(x){
x.select = !x.select;
console.log(x);
}
}