Angular+Node.js+MySQL点赞按钮问题：无记录时的ngIf条件编写

Hey there! Let's get that base button showing up when a user hasn't liked or disliked a post yet.

What's Wrong with Your Current Setup? #

Right now, you're nesting an *ngFor over the likes array inside each post. That means if a post has no matching like record for the user, the inner *ngFor doesn't loop at all—so your final base button div never gets rendered, even if you write the right condition.

The Cleanest Solution: Pre-Associate Likes with Posts #

Instead of juggling two separate arrays in the template, let's tie each post to its corresponding like record (if it exists) in your Angular component. This makes the template logic simple and easy to maintain.

Step 1: Update Your Component Logic

After fetching your posts and likes data from the backend, map each post to include its matching like (or null if none exists):

// Inside your component class, after getting posts and likes from API
this.posts = posts.map(post => {
  // Find the like entry for this post and current user
  const userLike = this.likes.find(
    like => like.user_id === post.user_id && like.post_id === post.post_id
  );
  // Return the post plus the associated like (or null)
  return {
    ...post,
    userLike: userLike || null
  };
});

Step 2: Simplify Your Template

Now you can ditch the inner *ngFor and use straightforward *ngIf checks based on the userLike property:

<div class="container" *ngFor="let post of posts; let i = index ">
  <h6> {{post.description}} </h6>
  <div class="row">
    <div class="col-md-3">
      <!-- Show success button if user liked the post -->
      <div *ngIf="post.userLike && post.userLike.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>

      <!-- Show warning button if user disliked the post -->
      <div *ngIf="post.userLike && post.userLike.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>

      <!-- Show base button if no like record exists -->
      <div *ngIf="!post.userLike">
        <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>
    </div>
  </div>
</div>

Quick Fix (If You Don't Want to Modify Component Data) #

If you prefer to keep the component logic as-is, you can use the find() method directly in the template (though this is less efficient and harder to debug long-term):

<!-- Replace your problematic ngIf with this -->
<div *ngIf="!likes.find(like => like.user_id === post.user_id && like.post_id === post.post_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>
</div>

But I strongly recommend the first approach—preprocessing the data in the component keeps your template clean and your logic easier to track.

内容的提问来源于stack exchange，提问作者Sivasankar chimata