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

时间:2015-12-21 23:05:04

标签: javascript angular

有没有办法让* 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>

1 个答案:

答案 0 :(得分:37)

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

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

请参阅此链接以获取阵列:Tersest way to create an array of integers from 1..20 in JavaScript

然后,您可以使用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 {
  (...)
}

希望它可以帮到你, 亨利

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

相关问题