如何使用 *ngIf 条件以角度显示默认空值按钮，用于使用 Mysql Node.js 的 *ngFor 循环内的喜欢、不喜欢和默认按钮答案

【问题标题】：How to show default null value button in angular using *ngIf condition for like, dislike and default buttons inside *ngFor loop using Mysql Node.js如何使用 *ngIf 条件以角度显示默认空值按钮，用于使用 Mysql Node.js 的 *ngFor 循环内的喜欢、不喜欢和默认按钮
【发布时间】：2019-07-09 15:14:10
【问题描述】：

您好，我正在尝试制作喜欢、不喜欢和默认按钮系统，例如 YouTube，但是当我使用默认按钮时出现错误，前两个条件（例如，不喜欢）运行良好，但我无法显示默认按钮当 MySQL 表中没有值时。这里我使用两个表帖子（post_id，user_id，描述），喜欢（like_id，user_id，post_id，like_status）列值。

<div class="container" *ngFor="let post of posts; let i = index">

      <div class="
      row" style="border: 1px solid #e6e6e6;">
        <div class="col-md-12 col-md-offset-0" style=" height: auto; ">
          <h6> {{post.description}} </h6>
        </div>
      </div>
<div class="row">

          <!--like button-->
          <div class="col-md-3">
            <div *ngFor="let like of postLikes; let j = index ">

              <div
                *ngIf="( (postLikes != '') && (like.like_id != null) && (like.like_id != '') && (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>{{like.user_id}},{{like.post_id}}
                {{post.post_id}} {{like.like_id}}
              </div>
              <div
                *ngIf="( (like.like_id) && (like.like_id != null) && (like.like_id != '') && (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>{{like.user_id}},{{like.post_id}}
                {{post.post_id}} {{like.like_id}}
              </div>

              <div
                *ngIf=" (post.user_id !=like.user_id) && (!like.like_id) && (postLikes == '') && (like.like_id == null) && (like.like_id == '')">
                <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>{{like.user_id}},{{like.post_id}}
                {{post.post_id}} {{like.like_id}}
              </div>
  </div> 
</div>

【问题讨论】：

标签： mysql node.js angular ngfor angular-ng-if

【解决方案1】：

为什么不将逻辑移至组件源代码？应该在组件中创建一个变量，便于在组件文件中调试。

( (postLikes != '') && (like.like_id != null) && (like.like_id != '') 
&& (post.user_id == like.user_id) 
&& (post.post_id == like.post_id) && (like.like_status == 'like'))

【讨论】：

谢谢你的建议，但我不知道该怎么做，你能帮我吗