Html 使用 Angular2 ngFor 索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43093786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Angular2 ngFor index
提问by Constantine
I have this code:
我有这个代码：
<div class="row list-group">
<div *ngFor="let product of products" >
<app-product [product]="product"></app-product>
</div>
</div>
I was wondering is there any way i can get products from array in buckets? Something like this:
我想知道有什么方法可以从桶中的数组中获取产品吗？像这样的东西：
<div class="list-group">
<div *ngFor="products; index+3" >
<div class="row">
<app-product [product]="products[index]"></app-product>
<app-product [product]="products[index+1]"></app-product>
<app-product [product]="products[index+2]"></app-product>
</div>
</div>
</div>
That way I could have all elements i need in a row
这样我就可以将所有需要的元素排成一行
UPD
UPD
Thanks to Teddy Sterne I ended up with this solution:
感谢 Teddy Sterne 我最终得到了这个解决方案：
<div class="list-group">
<div *ngFor="let product of products;let i = index">
<div class="row" *ngIf="i%3===0">
<app-product [product]="products[i]"></app-product>
<div *ngIf="products[i + 1]">
<app-product [product]="products[i + 1]"></app-product>
</div>
<div *ngIf="products[i + 2]">
<app-product [product]="products[i + 2]"></app-product>
</div>
</div>
</div>
</div>
回答by Teddy Sterne
Angular does not provide this functionality out of the box. I think that the simplest way to achieve the desired result is to only display data on every third index like so:
Angular 没有提供这种开箱即用的功能。我认为实现预期结果的最简单方法是只在每三个索引上显示数据，如下所示：
<div class="list-group">
<div *ngFor="let p of products; let idx = index" >
<div class="row" *ngIf="idx % 3 === 0">
<app-product [product]="products[idx]"></app-product>
<app-product [product]="products[idx+1]"></app-product>
<app-product [product]="products[idx+2]"></app-product>
</div>
</div>
</div>
Demo
演示
回答by Vivek Doshi
For index try this:
对于索引试试这个：
Controller File add function :
控制器文件添加功能：
chunks(array, size) {
let results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
};
In you view file :
在您查看文件：
<div *ngFor="let chunkProduct of chunks(products,3);" >
<div class="row">
<app-product *ngFor="let product of chunkProduct" [product]="product"></app-product>
</div>
</div>
This will work for all number , not only %3 numbers.
这将适用于所有数字，而不仅仅是 %3 数字。
@Teddy Sterne's solution will work incase of the number is %3 If we have 8 products it will show only 6 last 2 will be lost , in this it will also be shown.
@Teddy Sterne 的解决方案将在数字为 %3 的情况下起作用 如果我们有 8 个产品，它将仅显示 6 个，最后 2 个将丢失，在此也将显示。
And it will create extra blank div tags for not %3 index , if you inspect the element and check , because it will loop through each product and div will get repeated no matter if its index %3 or not.
如果您检查元素并检查，它将为 not %3 index 创建额外的空白 div 标签，因为它将遍历每个产品并且 div 将重复，无论其索引 %3 与否。
回答by purvin
Thanks Teddy Sterne for his answer.
感谢泰迪·斯特恩 (Teddy Sterne) 的回答。
Here's how it helped me to create a calendar control having 7 cells in a row
这是它如何帮助我创建一个连续 7 个单元格的日历控件
<div class="container-fluid">
<table class="table table-bordered">
<ng-container *ngFor="let d of data; let i = index" >
<tr *ngIf="i % 7 === 0">
<td *ngFor="let x of [i,i+1,i+2,i+3,i+4,i+5,i+6]">
{{data[x]}}
</td>
</tr>
</ng-container>
</table>
</div>
https://stackblitz.com/edit/angular-1nhor2?embed=1&file=src/app/app.component.html
https://stackblitz.com/edit/angular-1nhor2?embed=1&file=src/app/app.component.html
