Please how can i stop this. when i click on the like/dislike button it appends another ion-card, though if i manually refresh the page the second one will go but i really need help on how to stop this from happening . I am using observable to get the likes/dislikes Firebase
Can you share some code? It’s hard to know what the issue is if we dont know how this page is coded.
this is the component.ts part
…
this.topicReference = this.db.collection(‘posts’).doc(this.getpostID);
this.sub = this.topicReference.valueChanges().subscribe(res => {
this.desp.push(res)
this.topic_love = res.likes.includes(this.userid) ? ‘primary’ : ‘secondary’
this.topic_love_count = res.likes.length
this.topic_dislove = res.dislikes.includes(this.userid) ? 'medium' : 'secondary'
this.topic_dislove_count = res.dislikes.length
})
…
This is the View
<ion-card style="background: #fff;" *ngFor="let post of desp">
<ion-card-content>
<ion-item routerLink="/userprofile/{{post.userid}}" class="ion-button" routerDirection="forward">
<ion-avatar slot="start" *ngIf="!post.img_user">
<img src="../assets/user.jpg" />
</ion-avatar>
<ion-avatar slot="start" *ngIf="post.img_user">
<img src="{{post.img_user}}" />
</ion-avatar>
<ion-label><strong>{{post.username}}</strong></ion-label>
<strong style="margin-top: 10px;margin-left:15px;color: #72bb2b;">{{post.date | date }}</strong>
</ion-item>
<br>
<p>
<strong style="color: #72bb2b;">{{post.topic }}</strong>
</p>
<p>
{{post.message }}
<img *ngIf="post.img_post " src="{{post.img_post }}" />
</p>
<ion-button fill="none" (click)="toggleLike()" class="ion-no-margin ion-no-padding">
<ion-icon color="{{topic_love}}" name="heart" style="font-size: 24px;"></ion-icon><small>{{topic_love_count}}</small>
</ion-button>
<ion-button fill="none" (click)="toggledisLike()" class="ion-no-margin ion-no-padding">
<ion-icon color="{{topic_dislove}}" name="heart-dislike" style="font-size: 24px;"></ion-icon><small>{{topic_dislove_count}}</small>
</ion-button>
</ion-card-content>
</ion-card>
I found a solution to it , i noticed that the array was not overwriting to i check if array is empty if not i re-declare the array and push the new data and this fixed the issue