*ngFor 循环定义次数而不是在数组上重复的方法? [复制]

2024-02-25

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

有关数组创建的信息,请参阅此链接:在 JavaScript 中创建 1..20 整数数组的最简洁方法 https://stackoverflow.com/questions/6299500/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 {
  (...)
}

希望对你有帮助, 蒂埃里

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

*ngFor 循环定义次数而不是在数组上重复的方法? [复制] 的相关文章

随机推荐