angularjs - ngFor 、Angular5 中增量为 2

Question

我在 Angular 5 中使用 ngFor 编写了一段代码，如下所示

Angular 模型

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

In let i =index ; i++=2

但似乎 Angular 中不允许这样做，

如何在 Angular 和 Angularjs ng Repeat 中实现此目的？

Answer 1

实现解决方案的更好方法是编写样式，使内容动态分配到所需的位置，而不是跳过 ngFor 中的索引。