ngFor , Angular5 中的增量为 2答案

【问题标题】：increment of two in ngFor , Angular5ngFor , Angular5 中的增量为 2
【发布时间】：2019-06-14 12:07:48
【问题描述】：

我在 Angular 5 中有一段带有 ngFor 的代码，如下所示

角度模型

 export class UserReviews {
  public PageName: string;
  public UserName: string;
  public Review: string;
  public Rating: number;
  public IsApproved: boolean;
}

变量

UserReviewModel: UserReviews = new UserReviews();
UserReviewList: UserReviews[] = [];
this.UserReviewList = [
      {
        PageName: "Page Name Here",UserName: "User1",Review:"Review Here",
        Rating: 3,IsApproved: true
      },
      {
        PageName: "Page Name Here",UserName: "User2",Review:"Review Here",
        Rating: 4,IsApproved: true
      },
      {
        PageName: "Page Name Here",UserName: "User3",Review:"Review Here",
        Rating: 3, IsApproved: true
      },
      {
        PageName: "Page Name Here",UserName: "User4",Review:"Review Here",
        Rating: 2,IsApproved: true
      },
      {
        PageName: "Page Name Here",UserName: "User5",Review:"Review Here",
        Rating: 3,IsApproved: true
      },
      {
        PageName: "Page Name Here",UserName: "User6",Review:"Review Here",
        Rating: 4,IsApproved: true
      },
      {
        PageName: "Page Name Here",UserName: "User7",Review:"Review Here",
        Rating: 4,IsApproved: true
      },
      {
        PageName: "Page Name Here",UserName: "User8",Review:"Review Here",
        Rating: 5,IsApproved: true
      }
    ];

HTML 模板

<div class="row" *ngFor="let item of UserReviewList;let i = index">
    <div class="col-md-6 border-right-0">
      <div class="mb-1 text-grey">{{UserReviewList[i].UserName}}</div>
      <div class="mb-1">
        <i class="fas fa-star text-warning"></i>
        <i class="fas fa-star text-warning"></i>
        <i class="fas fa-star text-warning"></i>
        <i class="fas fa-star text-warning"></i>
        <i class="fas fa-star-half-alt text-warning"></i>
        <strong class="ml-1">{{UserReviewList[i].Rating}}</strong>
      </div>
      <div class="mb-1">
        {{UserReviewList[i].Review}}
      </div>
    </div>
    <div class="col-md-6">
      <div class="mb-1 text-grey">{{UserReviewList[i+1].UserName}}</div>
      <div class="mb-1">
        <i class="fas fa-star text-warning"></i>
        <i class="fas fa-star text-warning"></i>
        <i class="fas fa-star text-warning"></i>
        <i class="fas fa-star text-warning"></i>
        <i class="fas fa-star-half-alt text-warning"></i>
        <strong class="ml-1">{{UserReviewList[i].Rating}}</strong>
      </div>
      <div class="mb-1">
          {{UserReviewList[i].Review}}
      </div>
    </div>
  </div>

我在这里想要实现的是在一行中显示评论，但在一行中应该有两个评论示例：第 1 行应该有评论 1 和 2，同样的第 2 行有评论 3 和 4

但问题是它在第 1 行和第 2 行显示评论 1 和 2，而不是在 3 和 4 上显示评论 2 和 3，因此 2（甚至索引项）再次重复

你可以从下面的图片中了解这一点

如这里第二个所示，它应该从用户 3 而不是用户 4 开始，依此类推，在第三行用户 5 和用户 6

我的想法是在 ngFor 中将 i 增加 2

<div class="row" *ngFor="let item of UserReviewList;let i = index">

在 let i =index ; i++=2

但似乎在 angular 中是不允许的，

如何在 angular 和 angularjs ng repeat 中实现这一点？

【问题讨论】：

标签： angularjs angular

【解决方案1】：

实现解决方案的更好方法是通过在 ngFor 中跳过索引来将内容动态分配到所需位置并且不来编写样式。

【讨论】：

【解决方案2】：

你可以通过只添加来实现这一点

<div class="row">
      <div class="col-md-6 border-right-0" *ngFor="let item of UserReviewList;let i = index">
            <div class="mb-1 text-grey">{{UserReviewList[i].UserName}}</div>
            <div class="mb-1">
                   <i class="fas fa-star text-warning"></i>
                   <i class="fas fa-star text-warning"></i>
                   <i class="fas fa-star text-warning"></i>
                   <i class="fas fa-star text-warning"></i>
                   <i class="fas fa-star-half-alt text-warning"></i>
                   <strong class="ml-1">{{UserReviewList[i].Rating}}</strong>
            </div>
            <div class="mb-1">
                  {{UserReviewList[i].Review}}
            </div>
       </div>

我认为不需要添加第二个 div

【讨论】：

正是我几秒钟前所做的，顺便谢谢。我的代码在这里有点矫枉过正。