在 ngFor 循环中使用 ngIf 条件实现类似 Angular 的按钮

Question

我正在为我的网站使用 YouTube 风格（喜欢-不喜欢）按钮。但我不知道该怎么做。在我的数据库中，我有两个表帖子（post_id、user_id、description）、likes（like_id、user_id、post_id、like_status）列值。我加入了这两个表并通过 user_id 获取值，我只是使用了带有 ngFor 的帖子并实现了 ngIf 条件，如果 user_id 在 likes 表中，它们工作正常。如果 user_id 不存在于 likes 表中，我无法显示按钮，因为我不知道默认状态下按钮的确切情况。任何人都请帮我解决这个问题。

我尝试了以下解决方案，但没有奏效
*ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'like'))"

*ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'unlike'))"

*ngIf="( (postLikes.length == 0) && (post.user_id !== like.user_id) && (post.post_id !== like.post_id) && (like.like_status !== 'unlike'))"

前两个 ngIf 条件工作正常，但最后一个 ngIf 条件不工作。

<div class="container" style="width: 100%; height: 100%;  ">
  <div class="row" style=" margin: 1px; background-color: #fff; border: 2px solid #ada5a5; border-radius: 4px; ">
    <!-- ngFor for posts -->
    <div class="container" *ngFor="let post of posts; let i = index">
      <div class="row" style="border-top: 2px solid #ada5a5;">
        <div class="col-md-12 col-md-offset-0" style=" height: auto; ">
          <h6> {{post.description}} </h6>
        </div>
      </div>
      <!--ngFor for likes -->
      <div class="container" style="border: 0px solid #ada5a5; ">
        <div class="row">

          <!--like button-->
          <div class=" col-4">
            <div *ngFor="let like of postLikes; let j = index ">
              <div *ngIf="( (postLikes.length != 0) && (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)>Like</button><p>liked</p>
              </div>
              <div *ngIf="( (postLikes.length != 0) && (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'unlike'))">
                <button type="button" class="btn btn-danger" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>Disliked</p>
              </div>

              <div
                *ngIf="( (postLikes.length == 0) && (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)>Like</button><p>Default</p>
              </div>

            </div>
          </div>

          <!-- dislike button -->
          <div class=" col-6">
            <div class="" *ngFor="let like of postLikes">

              <div *ngIf="((post.user_id==like.user_id) && (post.post_id==like.post_id) && (like.like_status=='like'))">
                <button type="button" class="btn btn-warning" (click)=likeSubmit(post.user_id,post.post_id)>Dislike</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-success" (click)=likeSubmit(post.user_id,post.post_id)>Disliked</button>
              </div>
            </div>
          </div>
        </div>
      </div><!--Like button ends-->     
  </div>
</div>
</div>

<TypeScript>

export class AppComponent  {
  title = 'my-app';
  name = 'Angular';

  posts: any[] =
    [{"post_id":4,"user_id":2,"description":" Hi How are you ","created_date":"2019-01-28T12:30:49.000Z"},{"post_id":5,"user_id":2,"description":" Working a Fine ","created_date":"2019-01-28T12:31:20.000Z"},{"post_id":6,"user_id":2,"description":" Hi How are you ......","created_date":"2019-01-28T12:32:15.000Z"},{"post_id":7,"user_id":2,"description":" 4th test post","created_date":"2019-01-29T07:10:37.000Z"},{"post_id":9,"user_id":2,"description":" 5th test post","created_date":"2019-01-31T11:17:31.000Z"},{"post_id":10,"user_id":2,"description":" 6th test post","created_date":"2019-01-31T12:03:54.000Z"},{"post_id":11,"user_id":2,"description":" 7th post post","created_date":"2019-02-08T05:50:02.000Z"},{"post_id":12,"user_id":2,"description":" 8th test post ","created_date":"2019-02-08T06:08:01.000Z"}];

  postLikes:any[] =[{"post_id":4,"user_id":2,"like_status":"unlike","like_id":10},{"post_id":5,"user_id":2,"like_status":"like","like_id":9},{"post_id":6,"user_id":2,"like_status":"like","like_id":8},{"post_id":7,"user_id":2,"like_status":"like","like_id":7},{"post_id":9,"user_id":2,"like_status":"like","like_id":11}]

  post_id: any;
  // likes: Like[];
  like_id: number | null ;
  like_status: string;


  constructor(private http: HttpClient, private formBuilder: FormBuilder){


  }

  ngOnInit() {   }

  // Get user details from DB
  getPosts(user_id) {
    this.userService.getPosts(user_id).subscribe((data) => {
      this.posts = data;
    },
      error => {
        return console.log(error);
      }
    );
  }

// join postlikes
  getPostLikes(user_id) {
    // debugger
    this.userService.get_PostLikes(user_id).subscribe((results) => {
      this.postLikes = results;
     // console.log(results, 'results', this.postLikes, 'likes');
    },
      error => {
        return console.log(error);
      }
    );
  }

我希望 ngIf 条件在 user_id 不在 likes 表中时显示默认按钮。我的 stackBlitz 链接 https://stackblitz.com/edit/angular-wddupe?file=src%2Fapp%2Fapp.component.ts

Answer 1

这不是一个完整的答案，我只是无法添加评论，所以...
首先，'postLikes === 0' 总是返回 False，因为 'postLikes' 是一个数组，而 '0' 是数字类型。
如果要检查数组中是否有任何值，则可以检查它的长度
f.e. if(postLikes.length === 0) 或更简洁的方式 if(postLikes.length)
另请阅读 '=' '==' '===' 之间的区别并修复您的其他 ngIf 语句。
https://www.w3schools.com/js/js_operators.asp

据我了解，您将获取特定用户喜欢或不喜欢的所有 post_id-s，因此请遍历 postLikes 数组，如果没有特定的 post_id，则显示您的默认喜欢和不喜欢按钮。

另外我建议重构整个逻辑。