Я работаю с кнопками стиля YouTube (нравится-не нравится) для моего сайта.Но я не знаю, как это сделать.В моей базе данных у меня было две таблицы столбцов (post_id, user_id, description), значения столбцов лайков (like_id, user_id, post_id, like_status).Я присоединился к двум таблицам и получил значения по user_id, я просто использовал сообщения с ngFor и реализовал условие ngIf, они работают нормально, если user_id находится в таблице лайков. Если user_id отсутствует в таблице лайков, я не могу отобразить кнопки,потому что я не знаю точное состояние кнопки в статусе по умолчанию.Кто-нибудь, пожалуйста, помогите мне с этим.
Я пробовал следующие решения, но не работал
*ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'like'))"
*ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'unlike'))"
*ngIf="( (postLikes.length == 0) && (post.user_id !== like.user_id) && (post.post_id !== like.post_id) && (like.like_status !== 'unlike'))"
Первые два условия ngIf работают нормально, но не работает последнее условие ngIf.
<div class="container" style="width: 100%; height: 100%; ">
<div class="row" style=" margin: 1px; background-color: #fff; border: 2px solid #ada5a5; border-radius: 4px; ">
<!-- ngFor for posts -->
<div class="container" *ngFor="let post of posts; let i = index">
<div class="row" style="border-top: 2px solid #ada5a5;">
<div class="col-md-12 col-md-offset-0" style=" height: auto; ">
<h6> {{post.description}} </h6>
</div>
</div>
<!--ngFor for likes -->
<div class="container" style="border: 0px solid #ada5a5; ">
<div class="row">
<!--like button-->
<div class=" col-4">
<div *ngFor="let like of postLikes; let j = index ">
<div *ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'like'))">
<button type="button" class="btn btn-success" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>liked</p>
</div>
<div *ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'unlike'))">
<button type="button" class="btn btn-danger" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>Disliked</p>
</div>
<div
*ngIf="( (postLikes.length == 0) && (post.user_id != like.user_id) && (post.post_id != like.post_id) && (like.like_status != 'unlike'))">
<button type="button" class="btn btn-warning" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>Default</p>
</div>
</div>
</div>
<!-- dislike button -->
<div class=" col-6">
<div class="" *ngFor="let like of postLikes">
<div *ngIf="((post.user_id==like.user_id) && (post.post_id==like.post_id) && (like.like_status=='like'))">
<button type="button" class="btn btn-warning" (click)=likeSubmit(post.user_id,post.post_id)>Dislike</button>
</div>
<div
*ngIf="((post.user_id==like.user_id) && (post.post_id==like.post_id) && (like.like_status=='unlike'))">
<button type="button" class="btn btn-success" (click)=likeSubmit(post.user_id,post.post_id)>Disliked</button>
</div>
</div>
</div>
</div>
</div><!--Like button ends-->
</div>
</div>
</div>
<TypeScript>
export class AppComponent {
title = 'my-app';
name = 'Angular';
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;
// likes: Like[];
like_id: number | null ;
like_status: string;
constructor(private http: HttpClient, private formBuilder: FormBuilder){
}
ngOnInit() { }
// Get user details from DB
getPosts(user_id) {
this.userService.getPosts(user_id).subscribe((data) => {
this.posts = data;
},
error => {
return console.log(error);
}
);
}
// join postlikes
getPostLikes(user_id) {
// debugger
this.userService.get_PostLikes(user_id).subscribe((results) => {
this.postLikes = results;
// console.log(results, 'results', this.postLikes, 'likes');
},
error => {
return console.log(error);
}
);
}
Я хочу, чтобы условие ngIf показывало кнопку по умолчанию, когда user_id отсутствует в таблице лайков.Моя стековая ссылка Blitz https://stackblitz.com/edit/angular-wddupe?file=src%2Fapp%2Fapp.component.ts