使用Angular 2,我想多次复制模板中的一行。迭代对象很容易,*ngFor="#object of objects"
。但是,我想运行一个简单的for
循环,而不是foreach
循环。像(伪代码):
{for i = 0; i < 5; i++}
<li>Something</li>
{endfor}
我该怎么做?
答案 0 :(得分:59)
您可以动态生成一个数组,但需要时间呈现<li>Something</li>
,然后对该集合执行ngFor
。您也可以使用当前元素的index
。
<强>标记强>
<ul>
<li *ngFor="let item of createRange(5); let currentElementIndex=index+1">
{{currentElementIndex}} Something
</li>
</ul>
<强>代码强>
createRange(number){
var items: number[] = [];
for(var i = 1; i <= number; i++){
items.push(i);
}
return items;
}
在引擎盖下,将此*ngFor
语法降级为ng-template
版本。
<ul>
<ng-template ngFor let-item [ngForOf]="createRange(5)" let-currentElementIndex="(index + 1)" [ngForTrackBy]="trackByFn">
{{currentElementIndex}} Something
</ng-template>
</ul>
答案 1 :(得分:30)
如果您使用index
<div *ngFor="let item of items; let myIndex = index>
{{myIndex}}
</div>
通过这种方式,您可以获得两全其美的效果。
答案 2 :(得分:21)
如果您将int
传递给Array
构造函数,然后通过ngFor
进行迭代,则可以使用给定数量的条目实例化一个空数组。
在您的组件代码中
export class ForLoop {
fakeArray = new Array(12);
}
在您的模板中:
<ul>
<li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li>
</ul>
索引属性为您提供迭代编号。
答案 3 :(得分:15)
根据所需循环的长度,甚至可能是更“模板驱动”的解决方案:
<ul>
<li *ngFor="let index of [0,1,2,3,4,5]">
{{ index }}
</li>
</ul>
答案 4 :(得分:3)
更好的方法是在组件中创建假数组:
在组件中:
fakeArray = new Array(12);
InTemplate:
<ng-container *ngFor = "let n of fakeArray">
MyCONTENT
</ng-container>
答案 5 :(得分:0)
您可以使用_.range([optional] start, end)
。它会创建一个新的缩小列表,其中包含从开始(包括)到结束(独占)的数字间隔。我在这里使用lodash.js ._range()
方法。
示例:
<强> CODE 强>
var dayOfMonth = _.range(1,32); // It creates a new list from 1 to 31.
// HTML 现在,您可以在For循环中使用它
<div *ngFor="let day of dayOfMonth">{{day}}</div>
答案 6 :(得分:0)
如果你想使用第i个术语的对象并在每次迭代中将它输入到另一个组件,那么:
<table class="table table-striped table-hover">
<tr>
<th> Blogs </th>
</tr>
<tr *ngFor="let blogEl of blogs">
<app-blog-item [blog]="blogEl"> </app-blog-item>
</tr>
</table>
答案 7 :(得分:0)
queNumMin = 23;
queNumMax= 26;
result = 0;
for (let index = this.queNumMin; index <= this.queNumMax; index++) {
this.result = index
console.log( this.result);
}
最小和最大范围
答案 8 :(得分:0)
您可以简单地进行:-
{{"<li>Something</li>".repeat(5)}}