Icon color shows same for all the icons in child component ionic4 - ionic4

Question

I am using ionic 4 and i have a very strange issue. i have created a child components called social icons which is used to like or unlike ..etc. This child component will be called from parent component as shown below.
PARENT COMPONENT
<ion-card *ngFor="let creative of getArray">
<ion-card-header>
<social-icons [coll]="creative" (iconClicked)="updateUserReaction($event,creative?.id)"></social-icons><br>
</ion-card-header>
</ion-card>
Here i am calling child component within ngFor . Also i am passing creative obj to the child component.
creative obj :
{firstname: "Murali", description: "Photography of cute", nooflikes: 0, type: "creative", lastname: "Techwedge", …}
description: "Photography of cute"
elasticSearch_id: "creative_50"
file_type: "jpg"
filepath: "/documents/assets/Images/creative/IMG-20190310-WA0001_50.jpg"
firstname: "Murali"
id: 50
lastname: "Techwedge"
name: "Photography of cute"
noofcomments: 0
nooflikes: 0
noofshares: 0
noofunlikes: 2
resource_name: "IMG-20190310-WA0001_50.jpg"
socialIcons: Array(5)
0: {icon: "thumbs-up", operation: "cancellike", color: "danger"}
1: {icon: "thumbs-down", operation: "unlike"}
2: {icon: "eye", operation: "views"}
3: {icon: "text", operation: "comment"}
4: {icon: "settings", operation: "filter"}
length: 5
__proto__: Array(0)
timestamp: null
type: "creative"
user_id: 6
user_reaction: []
userobj: {id: 6, firstname: "Nikhil", lastname: "n", emailid: "nikhil#temp.org", password: "pass123", …}
views: 17
This is what creative obj data will be.
child component:
<ion-fab bottom>
<ion-grid>
<ion-row>
<ion-col size="2" *ngFor="let icon of coll?.socialIcons" >
<ion-card-title >
<ion-icon [color]="icon?.color" *ngIf="icon.icon != 'text' && icon.icon != 'settings'" [name]="icon.icon" (click)="clickedIcon(icon.operation)" style="font-size: 20px;"></ion-icon>
<ion-icon (click)="navigate()" *ngIf="icon.icon == 'text'" [name]="icon.icon" style="font-size: 20px;"></ion-icon>
<ion-icon *ngIf="icon.icon == 'settings'" [name]="icon.icon" style="font-size: 20px;" [routerLink]="['/filters/sharewith',{'id':coll?.id}]"></ion-icon>
</ion-card-title>
<ion-card-subtitle>
{{icon.value}}
</ion-card-subtitle>
</ion-col>
</ion-row>
</ion-grid>
</ion-fab>
Here in child component i am passing the color aattributes.
Below is the component.ts for child component.
ngOnInit() {
return new Promise((resolve, reject) => {
this.creativeServices.getCreativeReactions1(this.coll["id"],this.coll["userobj"]["id"]).pipe(map(res1=>res1.json())).subscribe(res1=>{
this.coll["user_reaction"] = res1;
this.coll["user_reaction"].map(element=>{
switch(element["latestReaction"]){
case 'like' :{
this.coll["socialIcons"][0]["color"] = "danger"
this.coll["socialIcons"][0]["operation"] = "cancellike"
break;
}
case "unlike":{
this.coll["socialIcons"][1]["color"] = "danger"
this.coll["socialIcons"][1]["operation"] = "cancelunlike"
break;
}
case "cancellike":{
this.coll["socialIcons"][0]["color"] = "default"
this.coll["socialIcons"][0]["operation"] = "like"
break;
}
case "cancelunlike":{
this.coll["socialIcons"][1]["color"] = "default"
this.coll["socialIcons"][1]["operation"] = "unlike"
break;
}
default:{
this.coll["socialIcons"][0]["color"] = "default"
}
}
})
resolve(this.coll)
console.log(this.coll)
})
})
// this.setTitle();
}
As you can see i am making a service call based on the response i get from the service call i am setting the color of icons for each creative object sent from parent component.
ISSUE : Suppose say if there is any value obtained from the response then the color of the icons changes for all the creatives irrespective of the switch condition.
say for a creative if the response from the service call is null then the color will be black.
now for second creative response exists based on the switch conditions the appropriate color is changed to this creative which is fine. But along with this the first creative color also gets changed. i,e this.coll.socialIcons arrays gets updated to all the creative objects.
I guess there is some issue with the way of rendering socialIcons.
Please let me know where am i going wrong?

Answer 1

This bit doesn't seem right:
case 'like' :{
this.coll["socialIcons"][0]["color"] = "danger"
this.coll["socialIcons"][0]["operation"] = "cancellike"
break;
}
case "unlike":{
this.coll["socialIcons"][1]["color"] = "danger"
this.coll["socialIcons"][1]["operation"] = "cancelunlike"
break;
}
case "cancellike":{
this.coll["socialIcons"][0]["color"] = "default"
this.coll["socialIcons"][0]["operation"] = "like"
break;
}
case "cancelunlike":{
this.coll["socialIcons"][1]["color"] = "default"
this.coll["socialIcons"][1]["operation"] = "unlike"
break;
}
default:{
this.coll["socialIcons"][0]["color"] = "default"
}
It's not clear what you're trying to do but whatever it is, you are only setting either ["socialIcons"][0] or ["socialIcons"][1] in all instances.
Problems with the question
You have not asked your question in a clear way, you should try to recreate an example with only the problem presented, and also give us all the information.
You are talking about user_reaction which has latestReaction in your code but when you posted a data sample user_reaction is just [].
If you are trying to run the code against an [] then its going to set the default case every time as its going to get undefined back from each switch test.