角度使用ngIf else比较两个数组值以显示按钮答案

【问题标题】：angular comparing two array values using ngIf else to show button角度使用ngIf else比较两个数组值以显示按钮
【发布时间】：2019-05-15 06:02:47
【问题描述】：

我正在使用 ngIf else 条件处理两个数组，我从两个表中获得了两个数组值 post[post_id, user_id, description], likes[post_id, user_id, like_status, like_id]。这里我需要比较 post_id, user_id和 like_status='like' 如果它们相等，则条件为 true 显示成功按钮，否则为 false 默认按钮。

我已经尝试过了，但它不工作，所以请帮助比较两个数组使用 ngIf else 。


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

    <div class="container" style="border: 0px solid #ada5a5; ">
        <div class="row">

          <!--like button-->
          <div class=" col-4">

              <div *ngIf="(postLikes.indexOf(user_id) > -1) && (post.post_id == postLikes.post_id) && (postLikes.like_status == 'like'); else default">
                <button type="button" class="btn btn-success" (click)=likeSubmit(post.user_id,post.post_id)>Liked</button><p>liked</p>
              </div>
                <ng-template #default>
                  <button type="button" class="btn btn-secondary" (click)=likeSubmit(post.user_id,post.post_id)>Like</button><p>like</p>
                </ng-template>
         </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;
  user_id:Number = 2;
  // likes: Like[];
  like_id: number | null ;
  like_status: string;

请尝试我的 StackBlitz 代码一次并更正错误

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

【问题讨论】：

posts 数组的长度和postLikes 总是相同的？

标签： arrays node.js angular

【解决方案1】：

我已更新代码，请查找更改

https://stackblitz.com/edit/angular-yjcpfk?file=src/app/app.component.html

希望对你有所帮助。

【讨论】：

【解决方案2】：

html 中的 postlikes 条件存在问题，您将字符串与数组进行比较用于 postlikes 数组的 Ngfor 剩余

我建议您在 typescript 中使用 find 关键字来比较结果并将结果传递给 boolean 等帖子对象，从中显示并隐藏您的按钮

【讨论】：

【解决方案3】：

一种方法

在你的组件中创建一个公共方法

public isPostLikedByUser(postID: any, userID: any){
    // This is actually matching the criteria exactly as you have described in question RETURN true or false
    return this.postLikes.findIndex((i) => i.post_id == postID && i.user_id == userID && i.like_status == 'like') > -1;
}

现在在你的视图中调用这个方法

 <div *ngIf="isPostLikedByUser(post.post_id, post.user_id); else otherTest">

我也更新了你的 stackblitz 示例。我希望这会有所帮助。

https://stackblitz.com/edit/angular-wddupe?embed=1&file=src/app/app.component.html

【讨论】：