Angular 2:如何编写for循环,而不是foreach循环

时间:2016-03-18 22:47:19

标签: angular angular2-template

使用Angular 2,我想多次复制模板中的一行。迭代对象很容易,*ngFor="#object of objects"。但是,我想运行一个简单的for循环,而不是foreach循环。像(伪代码):

{for i = 0; i < 5; i++}
  <li>Something</li>
{endfor}

我该怎么做?

9 个答案:

答案 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;
}

Demo Here

在引擎盖下,将此*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>

索引属性为您提供迭代编号。

Live version

答案 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>

Plunkr here

答案 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)}}