Angular 2：如何写一个for循环，而不是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){
  // var items: number[] = [];
  // for(var i = 1; i <= number; i++){
  //   items.push(i);
  // }
  // return items;
  return new Array(number);
}

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>

Answer 2

如果您使用index

，您可以将两者合二为一

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

有了这个，您可以两全其美。

Answer 3

如果将 int 传递给 Array 构造函数，然后通过 ngFor.[=16= 对其进行迭代，则可以实例化具有给定条目数的空数组]

在您的组件代码中：

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

在您的模板中：

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

索引属性为您提供迭代次数。

Live version

Answer 4

根据所需循环的长度，甚至可能有更 "template-driven" 的解决方案：

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

Plunkr here

Answer 6

您可以使用 _.range([optional] start, end)。它创建一个新的 Minified 列表，其中包含从开始（包括）到结束（不包括）的数字间隔。这里我使用的是lodash.js._range()方法。

示例：

代码

var dayOfMonth = _.range(1,32);  // It creates a new list from 1 to 31.

//HTML现在可以在For循环中使用

<div *ngFor="let day of dayOfMonth">{{day}}</div>

Answer 7

如果你想在每次迭代中使用第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>

Answer 8

   queNumMin = 23;
   queNumMax= 26;
   result = 0;
for (let index = this.queNumMin; index <= this.queNumMax; index++) {
         this.result = index
         console.log( this.result);
     }

范围最小和最大数量

Answer 9

你可以简单地做:-

{{"<li>Something</li>".repeat(5)}}

Answer 10

例如，假设您有一个名为 myArray 的数组，如果您想对其进行迭代

<ul>
  <li *ngFor="let array of myArray; let i = index">{{i}} {{array}}</li>
</ul>

Angular 2：如何写一个for循环，而不是foreach循环

Angular 2: How to write a for loop, not a foreach loop

angular2-template

angular