在 ngFor , Angular5 中增加 2

Question

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

在让 i =index ; 我++=2

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

我怎样才能在angular和angularjs ng repeat 中实现这一点？

Answer 1

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