Question

点击后如何更改图标的颜色？在带有引导程序的角度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);
}
}

单击后更改图标的颜色

1 个答案: