angular comparing two array values using ngIf else to show button - arrays

Question

I am working on two arrays with ngIf else condition , I got two array values from two tables posts[post_id, user_id, description], likes[post_id, user_id, like_status, like_id].Here i need to compare post_id, user_id and like_status='like' if they are equal then condition true show success button else false default button.
I am already tried but its not working so please help to compare two arrays in using ngIf else .
<div class="container" *ngFor="let post of posts; let i = index">
<h6> {{post.description}} </h6>
<div class="container" style="border: 0px solid #ada5a5; ">
<div class="row">
<!--like button-->
<div class=" col-4">
<div *ngIf="(postLikes.indexOf(user_id) > -1) && (post.post_id == postLikes.post_id) && (postLikes.like_status == 'like'); else default">
<button type="button" class="btn btn-success" (click)=likeSubmit(post.user_id,post.post_id)>Liked</button><p>liked</p>
</div>
<ng-template #default>
<button type="button" class="btn btn-secondary" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>like</p>
</ng-template>
</div>
</div>
</div>
</div>
// two tables data
posts: any[] =
[{
"post_id": 4,
"user_id": 2,
"description": " Hi How are you ",
"created_date": "2019-01-28T12:30:49.000Z"
}, {
"post_id": 5,
"user_id": 2,
"description": " Working a Fine ",
"created_date": "2019-01-28T12:31:20.000Z"
}, {
"post_id": 6,
"user_id": 2,
"description": " Hi How are you ......",
"created_date": "2019-01-28T12:32:15.000Z"
}, {
"post_id": 7,
"user_id": 2,
"description": " 4th test post",
"created_date": "2019-01-29T07:10:37.000Z"
}, {
"post_id": 9,
"user_id": 2,
"description": " 5th test post",
"created_date": "2019-01-31T11:17:31.000Z"
}, {
"post_id": 10,
"user_id": 2,
"description": " 6th test post",
"created_date": "2019-01-31T12:03:54.000Z"
}, {
"post_id": 11,
"user_id": 2,
"description": " 7th post post",
"created_date": "2019-02-08T05:50:02.000Z"
}, {
"post_id": 12,
"user_id": 2,
"description": " 8th test post ",
"created_date": "2019-02-08T06:08:01.000Z"
}];
postLikes:any[] =[{
"post_id": 4,
"user_id": 2,
"like_status": "unlike",
"like_id": 10
}, {
"post_id": 5,
"user_id": 2,
"like_status": "like",
"like_id": 9
}, {
"post_id": 6,
"user_id": 2,
"like_status": "like",
"like_id": 8
}, {
"post_id": 7,
"user_id": 2,
"like_status": "like",
"like_id": 7
}, {
"post_id": 9,
"user_id": 2,
"like_status": "like",
"like_id": 11
}];
post_id: any;
user_id:Number = 2;
// likes: Like[];
like_id: number | null ;
like_status: string;
Please try my StackBlitz code once and correct the error
https://stackblitz.com/edit/angular-wddupe?file=src%2Fapp%2Fapp.component.ts

Answer 1

I have updated code, please find changes
https://stackblitz.com/edit/angular-yjcpfk?file=src/app/app.component.html
Hope this helps you.

Answer 2

There is a problem with postlikes condition in html you compare string with array
Ngfor for postlikes array is remaining
I recommend you to do this in typescript using find keyword to compare and pass that result on posts objects like boolean from that it shows and hide your button

Answer 3

One way to do this
Create a public method in your component as
public isPostLikedByUser(postID: any, userID: any){
// This is actually matching the criteria exactly as you have described in question RETURN true or false
return this.postLikes.findIndex((i) => i.post_id == postID && i.user_id == userID && i.like_status == 'like') > -1;
}
Now call this method in your view as
<div *ngIf="isPostLikedByUser(post.post_id, post.user_id); else otherTest">
I have updated you stackblitz example as well. I hope this helps.
https://stackblitz.com/edit/angular-wddupe?embed=1&file=src/app/app.component.html