Angular 2 : How to write a for loop, 不是 foreach 循环

Question

使用 Angular 2，我想多次复制模板中的一行。遍历一个对象很容易，*ngFor="let 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){
  // return new Array(number);
  return new Array(number).fill(0)
    .map((n, index) => index + 1);
}

Demo Here

引擎盖下 Angular 脱糖 *ngFor ng-template 的语法版本。

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