Угловой Node.js MySQL как кнопка неприязни

Question

Я создаю кнопки в стиле YouTube (нравится-не нравится) для моего твиттер-подобного веб-сайта.Но у меня была проблема с реализацией кнопок like-dislike, я использую Angular Node.js MYSQL, с циклом NgFor и условием ngIf, у меня было две таблицы posts {post_id, user_id, description} и лайки {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 == в отличие от работы good, если у нас нет значений в таблице like, как мы можем записать условие ngIfo показать кнопку

Answer 1

Вы делаете это немного неправильно, вам не нужно выполнять внутренний цикл в шаблоне, вы можете просто объединить две таблицы в логике вашего компонента, а затем просто отобразить необходимые данные.Попробуйте добавить метод в ваш компонент, который объединяет две таблицы, и тогда вы можете легко делать то, что вы хотите в шаблоне.Пример:

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>

Надеюсь, что поможет.