[英]increment of two in ngFor , Angular5
我在ngFor 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,在3和4上卻顯示了評論2和3,所以2(甚至索引項)再次重復
您可以從下面的圖片中對此有所了解
如此處第二點所示,它應該以用戶3而不是用戶4開頭,以此類推,在第三行中是用戶5和用戶6
我的想法是在ngFor中將i加2
<div class="row" *ngFor="let item of UserReviewList;let i = index">
讓我=索引; 我++ = 2
但似乎不允許以尖角形式出現,
我怎樣才能做到有角度的並且也有角度重復 ?
實現解決方案的更好方法是編寫樣式,使內容可以動態地分配給所需的位置,而不要跳過ngFor中的索引。
您可以通過僅添加
<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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.