最新消息: 电脑我帮您提供丰富的电脑知识,编程学习,软件下载,win7系统下载。

角Node.js的MySQL的喜欢不喜欢按钮

IT培训 admin 7浏览 0评论

角Node.js的MySQL的喜欢不喜欢按钮

我创建一个YouTube的风格(比如,不喜欢)按钮我的Twitter类似的网站。但我不得不与实施样不喜欢按钮,我使用Node.js的角度MYSQL,与NgFor环和ngIf条件的问题,我有两个表的帖子{POST_ID,USER_ID,说明}和{喜欢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 contion的最后一个,如果按钮like_status ==一样,与like_status ==不像工作好,如果我们没有像表,我们怎么能写任何值ngIf条件o显示按钮

回答如下:

你正在做的一点点错误,你不需要在你的模板进行内部循环,可以执行只在您的组件的逻辑连接两个表,事后只呈现所需的数据。尝试添加方法到组件联接两个表,然后你可以很容易地做你的模板想要的东西。例:

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>

希望帮助。

角Node.js的MySQL的喜欢不喜欢按钮

我创建一个YouTube的风格(比如,不喜欢)按钮我的Twitter类似的网站。但我不得不与实施样不喜欢按钮,我使用Node.js的角度MYSQL,与NgFor环和ngIf条件的问题,我有两个表的帖子{POST_ID,USER_ID,说明}和{喜欢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 contion的最后一个,如果按钮like_status ==一样,与like_status ==不像工作好,如果我们没有像表,我们怎么能写任何值ngIf条件o显示按钮

回答如下:

你正在做的一点点错误,你不需要在你的模板进行内部循环,可以执行只在您的组件的逻辑连接两个表,事后只呈现所需的数据。尝试添加方法到组件联接两个表,然后你可以很容易地做你的模板想要的东西。例:

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>

希望帮助。

发布评论

评论列表 (0)

  1. 暂无评论