通过*ngFor循环定义的次数而不是重复数组？

Question

有没有办法*ngFor循环定义的次数而不是总是迭代数组？

例如,我想要一个重复5次的列表,循环就像在C#中那样;

for (int i = 0; i < 4; i++){

}

期望的结果:

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>

Answer 1

在组件中,您可以定义一个数字数组(ES6),如下所述:

export class SampleComponent {
  constructor() {
    this.numbers = Array(5).fill(0).map((x,i)=>i);
  }
}

然后,您可以使用以下代码迭代此数组ngFor:

@View({
  template: `
    <ul>
      <li *ngFor="let number of numbers">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

或者很快:

@View({
  template: `
    <ul>
      <li *ngFor="let number of [0,1,2,3,4]">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

希望它对你有帮助,蒂埃里

编辑:修复了填充语句和模板语法.

这是唯一的解决方案让我伤心. (81认同)
<li *ngFor="let i of [].constructor(5)"></li > (19认同)
为了准确获得OP想要的内容（每个li包含从1开始的连续数字），请扩展@olNoy的答案： ```<li *ngFor =“let e of [].constructor(5); let i = index”> <span>{{i+1}}</span></li>``` (9认同)
我认为`Array(5).fill()...`缺少一个0.它应该是`Array(5).fill(0)`.来自文档https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/fill (3认同)
@DanielFlippance 为什么你没有发布答案而不是发表评论。 (2认同)
@MeVimalkumar 这个问题目前只允许发表评论 (2认同)