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

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>

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>

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

Live version

Answer 4

根据所需循环的长度，甚至可能是更“模板驱动”的解决方案：

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

Answer 5

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

在组件中：

fakeArray = new Array(12);

InTemplate：

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

Plunkr here

Answer 6

您可以使用_.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>

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

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

9 个答案: