Question

我使用ngIf条件学习有角按钮，如果我们在表数据中找不到任何数据如何显示按钮

，我在显示按钮时会遇到问题

我通过比较两个表格数据尝试了三种不同的{喜欢，不喜欢，默认}条件，

*ngIf="( (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'like'))">

*ngIf="( (post.user_id == like.user_id) && (post.post_id == like.post_id) && (like.like_status == 'unlike'))">

*ngIf="( )">

如果我们找不到特定帖子的特定用户的任何数据，我需要第三者的条件，

    <div class="container" *ngFor="let post of posts; let i = index">
         <h6> {{post.description}} </h6>
        </div>
      </div>


      <!--ngFor for likes -->
          <div class=" col-4">
            <div *ngFor="let like of postLikes; let j = index ">

<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)>Like</button><p>liked</p>
              </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-danger" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>Disliked</p>
              </div>

              <div  *ngIf="( )">
                <button type="button" class="btn btn-warning" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>Default</p>
              </div>

            </div>
      </div>
  </div>






// two tables data
  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;


``````````````````````````````

Please try my StackBlitz code once and correct the error

https://stackblitz.com/edit/angular-wddupe?file=src%2Fapp%2Fapp.component.ts

Answer 1

将您的if条件移出for循环并检查if(!postLikes)

<div *ngFor="let like of postLikes; let j = index">
</div>

<div *ngIf="!postLikes">
</div>

Answer 2

您可以逆转条件并将其用于第三个条件。就像在两个条件下都添加Not（！）一样，您可以编写代码。

angular ngIf条件，如果在表数据中找不到任何值，则显示按钮

2 个答案: