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

Question

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

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

我该怎么做？

Answer 1

您可以动态生成一个您想要渲染的时间数组<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;
}

在这里演示

在引擎盖下角度de-sugared这个*ngFor语法ng-template版本.

<ul>
    <ng-template ngFor let-item [ngForOf]="createRange(5)" let-currentElementIndex="(index + 1)" [ngForTrackBy]="trackByFn">
      {{currentElementIndex}} Something
    </ng-template>
</ul>

Answer 2

如果使用,您可以同时使用一个 index

<div *ngFor="let item of items; let myIndex = index>
  {{myIndex}}
</div>

有了它,你可以获得两全其美.

Answer 3

如果您将一个条目传递int给Array构造函数,然后通过它进行迭代,则可以使用给定数量的条目实例化一个空数组ngFor.

在您的组件代码中:

export class ForLoop {
  fakeArray = new Array(12);
}

在您的模板中:

<ul>
  <li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li>
</ul>

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

实时版

Answer 4

根据所需循环的长度,甚至可能是更"模板驱动"的解决方案:

<ul>
  <li *ngFor="let index of [0,1,2,3,4,5]">
    {{ index }}
  </li>
</ul>

Answer 5

更好的方法是在组件中创建一个假数组：

在组件中：

fakeArray = new Array(12);

在模板中：

<ng-container *ngFor = "let n of fakeArray">
     MyCONTENT
</ng-container>

普朗克在这里