时间戳

首页 > 解决方案 > Angular Node.js mysql 喜欢不喜欢按钮

mysql - Angular Node.js mysql 喜欢不喜欢按钮

问题描述

我正在为我的 twitter 之类的网站创建一个 YouTube 样式（喜欢-不喜欢）按钮。但是我在实现不喜欢按钮时遇到了问题，我正在使用 Angular Node.js MYSQL，带有 NgFor 循环和 ngIf 条件，我有两个表 post{post_id, user_id,description} 和 likes{like_id, user_id, post_id, like_status } 使用公共键 user_id、post_id。

如果我们在喜欢表中没有特定用户的任何值，我们如何编写条件以显示基本按钮 

<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==unlike 工作良好，如果我们在 like 表中没有任何值，我们怎么写ngIf 条件 o 显示按钮

标签： mysqlnode.jsangular

解决方案

你这样做有点不正确，你不需要在你的模板中执行内部循环，你可以在你的组件逻辑中执行两个表的连接，然后只渲染所需的数据。尝试将方法添加到连接两个表的组件中，然后您可以轻松地在模板中执行您想要的操作。例子：

TS文件

...
    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};
        });
    }
...

html文件

<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>

希望有帮助。

推荐阅读