能否在Angular的ngFor中直接遍历数组生成1,4,7,10序列？

可以实现，不用在TS文件里编写循环，有两种常用方式：

方法一：利用ngFor索引结合条件过滤 #

通过遍历一个足够长度的空数组，利用ngFor的索引计算目标值，再用*ngIf过滤出符合规则的项：

<!-- 生成1、4、7、10序列，假设最大值为10 -->
<div *ngFor="let _ of Array(10); let i = index">
  <span *ngIf="(i * 3 + 1) <= 10">{{ i * 3 + 1 }}</span>
</div>

这里Array(10)生成一个长度为10的空数组供ngFor遍历，通过索引i计算出i*3+1的结果，再用*ngIf确保只显示不超过最大值的项，避免多余的空元素。

方法二：自定义管道（更优雅可复用） #

自定义一个Angular管道，直接生成符合步长规则的序列，后续在ngFor中直接遍历管道返回的数组即可：

1. 编写管道代码 #

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

@Pipe({ name: 'stepSequence' })
export class StepSequencePipe implements PipeTransform {
  transform(start: number, step: number, end: number): number[] {
    const sequence = [];
    for (let num = start; num <= end; num += step) {
      sequence.push(num);
    }
    return sequence;
  }
}

2. 在模块中声明管道 #

确保将这个管道添加到对应模块的declarations数组中：

@NgModule({
  declarations: [StepSequencePipe],
  // ...其他配置
})
export class YourModule { }

3. 在模板中使用 #

<!-- 生成起始值1、步长3、结束值10的序列 -->
<div *ngFor="let num of 1 | stepSequence:3:10">
  {{ num }}
</div>

这种方式的优势是复用性强，后续需要其他步长的序列时，只需调整管道参数即可，代码更简洁易维护。

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