我正在为类似Twitter的网站创建YouTube样式(不喜欢)按钮。 但是我在实现喜欢按钮时遇到问题,我在使用Angular Node.js MYSQL,并使用NgFor循环和ngIf条件,我有两个表posts {post_id,user_id,description}和likes {like_id,user_id,post_id,like_status },具有公用键user_id,post_id。
如果在Likes表中没有特定用户的任何值,我们如何编写条件以显示基本按钮
<div class="container" *ngFor="let post of posts; let i = index ">
<h6> {{post.description}} </h6>
<div class="row">
<div class="col-md-3">
<div *ngFor="let like of likes; ">
<div *ngIf="((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)><i class="fa fa-thumbs-up"
aria-hidden="true"></i></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-warning" (click)=likeSubmit(post.user_id,post.post_id)><i class="fa fa-thumbs-up"
aria-hidden="true"></i></button>
</div>
<!---problem with ngIf condition -->
<div *ngIf="ngIf condition">
<button type="button" class="btn btn-basic" (click)=likeSubmit(post.user_id,post.post_id)><i
class="fa fa-thumbs-up" aria-hidden="true"></i></button>
</div>
前两个ngIf条件运行良好,但我无法为最后一个ngIf条件设置好,如果按钮like_status == like和&like_status ==与work good不同,如果我们在like表中没有任何值我们可以写ngIf条件o显示按钮
答案 0 :(得分:0)
您做的这有点不正确,您不需要在模板中执行内部循环,您可以在组件逻辑中仅执行两个表的联接,然后仅呈现所需的数据。尝试将方法添加到连接两个表的组件中,然后可以轻松地在模板中执行所需的操作。示例:
...
public getPostsWithLikes() {
this.posts.map(post => {
const like = this.likes && this.likes.find(plike => post.user_id === plike.user_id && post.post_id === plike.post_id);
return {post, like};
});
}
...
<div class="container" *ngFor="let item of getPostsWithLikes(); let i = index ">
<h6> {{item.post.description}} </h6>
<div class="row">
<div class="col-md-3">
<div *ngIf="item.like && item.like.like_status=='like'">
<button type="button" class="btn btn-success" (click)=likeSubmit(item.post.user_id,item.post.post_id)><i class="fa fa-thumbs-up"
aria-hidden="true"></i></button>
</div>
<div *ngIf="item.like && item.like.like_status=='unlike'">
<button type="button" class="btn btn-warning" (click)=likeSubmit(item.post.user_id,item.post.post_id)><i class="fa fa-thumbs-up"
aria-hidden="true"></i></button>
</div>
<!---if you don't have related record in likes table, like would be null (false), so you just need to invert it-->
<div *ngIf="!item.like">
<button type="button" class="btn btn-basic" (click)=likeSubmit(item.post.user_id,item.post.post_id)><i
class="fa fa-thumbs-up" aria-hidden="true"></i></button>
</div>
希望有帮助。