javascript - *ngFor 循环定义次数而不是重复数组的方法?

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

最佳答案

在您的组件中,您可以定义一个数字数组 (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 {
  (...)
}

希望对你有帮助, 蒂埃里

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

关于javascript - *ngFor 循环定义次数而不是重复数组的方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34405878/

相关文章:

javascript - 有没有办法检查输入值是否包含特定的键码?

javascript - 单击使用 YOUTUBE Iframe 加载多个视频

node.js - Angular 通用类型错误: Cannot read property 'assign' of undefined

angular - 在 Angular 4 中,钩子(Hook) ngOnChanges 没有在输入时触发

javascript - 硬币 slider 中的错误

javascript - 复杂的正则表达式组合 - 匹配 "if"的正则表达式

javascript - 全日历渲染 2000 个事件

angular - 类型错误 : Cannot read properties of undefined (reading 'match' )

python - Boto:将多个文件上传到 s3

javascript - 来自外部 API 的 Angular2 http.get