ngFor中两个增量，Angular5

Question

I m having a piece of code in Angular 5 with ngFor as shown below

Angular Model

 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 Template

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

What i am trying to achieve here is to display reviews in row but in one row there should be two review Example : row 1 should have review 1 and 2, same row 2 have review 3 and 4

But problem is that it is showing review 1 and 2 in row 1 and row 2 it is showing review 2 and 3 instead on 3 and 4 so 2(even index item) is getting repeat again

You can have an idea of this from below image

AS shown here in second here , it should start with user 3 instead of user 4 and so on in 3rd row user 5 and user 6

My idea to achieve this is to increment i by 2 in ngFor

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

In let i =index ; i++=2

But seems like it is not allowed in angular ,

How can i achieve this in angular and also in angularjs ng repeat ?

Answer 1

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

Answer 2

You can achieve this by adding only

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

I think no need to add second div