приращение двух в ngFor, Angular5

Question

У меня есть код в 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>

Здесь я пытаюсь добиться того, чтобы обзоры отображались в строке, но в одной строке должно быть два отзыва. Пример: строка 1должен иметь обзор 1 и 2, в той же строке 2 есть обзор 3 и 4

Но проблема в в том, что он показывает обзор 1 и 2 в строке 1, а в строке 2 он показывает обзор 2 и3 вместо 3 и 4, поэтому 2 (четный элемент индекса) снова повторяется

Вы можете иметь представление об этом снизу image

Как показано здесь во втором здесь, он должен начинаться с пользователя 3 вместо пользователя 4 и т. Д. В 3-м ряду пользователя 5 и пользователя 6

Моя идея для достижения этого состоит в увеличении i на 2 вngFor

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

In let i = index;i ++ = 2

Но кажется, что это не разрешено в угловых,

Как я могу добиться этого в угловых , а также в angularjs ng repeat?

Answer 1

Лучшим способом достижения решения является написание ваших стилей таким образом, чтобы ваш контент должен был динамически назначаться на требуемую позицию, а НЕ путем пропуска индекса в ngFor.

Answer 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