Angularjs ngFor中的两个增量，角度5

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

角度模型

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

Varibales

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>

{{UserReviewList[i].UserName}
{{UserReviewList[i].Rating}
{{UserReviewList[i].Review}
{{UserReviewList[i+1].UserName}
{{UserReviewList[i].Rating}
{{UserReviewList[i].Review}

我在这里试图实现的是在一行中显示评论，但在一行中应该有两个评论 示例：第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">

式中i=指数；i++=2

但似乎这是不允许的

---

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

只需添加

<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>

{{UserReviewList[i].UserName}
{{UserReviewList[i].Rating}
{{UserReviewList[i].Review}

---

我认为不需要添加第二个div。实现解决方案的更好方法是，通过编写样式，将内容动态分配到所需的位置，而不是通过跳过ngFor中的索引。

正是我几秒钟前所做的，顺便说一句，谢谢。我的代码在这里使用过度了。