ngFor，Angular5

Question

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

角度模型

 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 ++ = 2

但是似乎不允许在尖角处使用

如何在 angular 和 angularjs ng 中实现这一目标？

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