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){
  // return new Array(number);
  return new Array(number).fill(0)
    .map((n, index) => index + 1);
}

演示在这里

在底层，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

如果将

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 3

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

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

Answer 4

如果您使用

index

，您可以将两者合而为一

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

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

Answer 5

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

在组件中：

fakeArray = new Array(12);

在模板中：

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

在这里

Answer 6

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

范围最小和最大数量

Answer 7

您可以使用

_.range([optional] start, end)

。它创建一个新的缩小列表，其中包含从开始（包括）到结束（不包括）的数字间隔。这里我使用 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 8

我找到了这个问题的最佳答案这里

您需要在类中创建一个属性并将其引用到 Array 对象：

export class SomeComponent {
  Arr = Array; //Array type captured in a variable
  num:number = 20;
}

在 HTML 中您可以使用：

<ul id="next-pages">
    <li class="line" *ngFor="let _ of Arr(10)">&nbsp;</li>
</ul>

Answer 9

例如，假设您有一个名为 myArray 的数组，如果您想迭代它

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

Answer 10

您可以通过简单的方式做到这一点，

<div *ngFor="let i of ('a,'.repeat(100).split(','))">
    .....
</div>

('a,'.repeat(100).split(','))

--> 这意味着构造一个由

a,

组成的长连接字符串 100 次，然后用

,

将其拆分，得到 100 个项目的数组，

ngFor

拾取并迭代 100 次。

Answer 11

1.生成一个管道，例如“ng g p range”

transform(length: number):any[]{
        return new Array(length);
    }

2.html

 <div *ngFor="let _ of (12|range)" >  ...   </div>

Answer 12

如果你使用 Angular，我建议在这样的循环中使用扩展运算符：

this.triggersList = res.content;
      for (let index = 10; index <= this.triggersList.length; index++) {
         this.triggersList.push(...this.triggersList);
      }
      this.totalItems = res.totalElements;

Answer 13

如果你想使用第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 14

如果您想多次重复行。

你可以简单地做:-

在.ts文件中声明

public repeater = "<li>Something</li>";

然后使用以下命令打印 .html 文件。

{{repeater.repeat(5)}}