Angular 17中如何使用@For控制流实现数字范围循环？

Angular 17的@for控制流语法不支持直接写1 to 10这种范围遍历形式，它要求遍历的是可迭代对象（比如数组、Set等）。下面是几种可行的实现方案：

方案1：组件内生成数字数组 #

在组件类中提前生成包含1到10的数组，模板直接遍历这个数组：

组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-number-loop',
  templateUrl: './number-loop.component.html'
})
export class NumberLoopComponent {
  // 生成1到10的数组
  numbers = Array.from({ length: 10 }, (_, index) => index + 1);
}

模板代码：

@for (num of numbers; track num) {
  <p>{{ num }}</p>
}

方案2：自定义范围管道（适合复用场景） #

如果需要在多个组件中使用范围遍历，可以自定义一个管道来生成数字范围：

管道代码：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'range' })
export class RangePipe implements PipeTransform {
  transform(end: number, start: number = 1): number[] {
    return Array.from({ length: end - start + 1 }, (_, index) => start + index);
  }
}

记得在模块中声明这个管道，然后模板中使用：

<!-- 遍历1到10 -->
@for (num of 10 | range; track num) {
  <p>{{ num }}</p>
}

<!-- 遍历指定起始值，比如3到8 -->
@for (num of 8 | range:3; track num) {
  <p>{{ num }}</p>
}

方案3：利用$index临时生成（快速临时方案） #

如果不想额外定义数组或管道，可以创建一个指定长度的空数组，通过$index + 1得到1到10的值：

组件代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-dummy-loop',
  templateUrl: './dummy-loop.component.html'
})
export class DummyLoopComponent {
  // 创建长度为10的空数组
  dummyArray = new Array(10);
}

模板代码：

@for (item of dummyArray; track $index) {
  <p>{{ $index + 1 }}</p>
}

总结建议 #

• 若只是单次使用，方案1或方案3足够简单直接；
• 若需要在多个地方复用范围遍历逻辑，推荐方案2的自定义管道，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Marios Tele