I am trying to show in a table a flag icon if the person who made a booking has had an order canceled in the past.
When admin changes a booking status to cancelled it sets a 'hasCanceled' boolean to true on the user who made the booking in firebase.
in my HTML table I am using an *ngIF to run a function and show the icon if the function returns true passing the order key as a parameter to the function.
<td><i *ngIf="hasUserCanceled(order.$key)" class="fa fa-flag"></i></td>
and here is the function itself:
hasUserCanceled(key) {
//Get the userId from the order
this.order = this.af.object('/orders/' + key);
this.order.subscribe(res => {
this.userId = res.userId;
});
this.canceledUsers = this.af.object('/users/' + this.userId);
this.canceledUsers.subscribe((res) => {
this.hasCanceled = res.hasCanceled
});
if (this.hasCanceled == true) {
console.log('THIS IS TRUE')
return true
}
}
I can see the flag in the right places of the users who have canceled, so the functions purpose is working, But the issue is that in the console, the function is running over and over and not stopping. Is there anything noticeable that I am doing wrong?
Console log Image:
