点击后如何更改图标的颜色?在带有引导程序的角度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);
}
}
答案 0 :(得分: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);
}
}