如何在Angular模板中循环遍历年份数组并实现单年可点击

步骤1：优化TS中的年份数组生成 #

把原来的getLastYear()函数改成getter属性，既可以保留原逻辑，也可以用更简洁的方式生成数组，同时避免模板重复调用函数造成性能损耗：

get lastYears(): number[] {
  const startYear = this.org.createdAt.getFullYear();
  const currentYear = new Date().getFullYear();
  const arrayOfYears = [];
  for (let year = startYear; year <= currentYear - 1; year++) {
    arrayOfYears.push(year);
  }
  return arrayOfYears;
}

如果想简化循环逻辑，也可以用Array.from替代for循环：

get lastYears(): number[] {
  const startYear = this.org.createdAt.getFullYear();
  const currentYear = new Date().getFullYear();
  return Array.from({ length: currentYear - startYear }, (_, index) => startYear + index);
}

步骤2：在HTML模板中遍历数组生成独立链接 #

用*ngFor遍历年份数组，为每个年份生成独立的可点击链接，同时用ng-container包裹*ngIf避免生成多余DOM元素：

<ng-container *ngIf="canShowLastYear()">
  <a 
    *ngFor="let year of lastYears"
    [routerLink]="['.']" 
    routerLinkActive="active" 
    [queryParams]="{hmRange: year}" 
    [queryParamsHandling]="'merge'"
  >
    {{ year }}
  </a>
</ng-container>

关键说明 #

• 改用getter属性lastYears，避免Angular变更检测时重复执行数组生成逻辑，提升性能。
• *ngFor遍历数组后，每个年份对应独立的<a>标签，满足单个年份可点击的需求。
• 每个链接的queryParams中hmRange设为当前遍历的年份，点击后会传递对应年份的参数。

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