Angular多*ngFor循环实现全局连续序号显示问题

嘿，这事儿好办！咱们可以通过累加前面所有数组的总长度，再结合当前循环的index来生成连续的序号。下面给你两种完整的实现方案，按需选择：

方案一：模板内直接计算（适合数组数量少的场景） #

这种方式不用额外写组件方法，直接在模板里计算序号，简单直接。

组件代码（TypeScript） #

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

@Component({
  selector: 'app-sequential-numbering',
  templateUrl: './sequential-numbering.component.html'
})
export class SequentialNumberingComponent {
  arr1 = ['Val1', 'Val2', 'Val3'];
  arr2 = ['Val1', 'Val2', 'Val3'];
  arr3 = ['Val1', 'Val2', 'Val3'];
}

模板代码（HTML） #

<!-- 第一个数组：前面没有其他数组，直接用index+1 -->
<div *ngFor="let val of arr1; let i = index">
  {{ i + 1 }}. {{ val }}
</div>

<!-- 第二个数组：加上第一个数组的长度，再加上当前index+1 -->
<div *ngFor="let val of arr2; let i = index">
  {{ arr1.length + i + 1 }}. {{ val }}
</div>

<!-- 第三个数组：加上前两个数组的总长度，再加上当前index+1 -->
<div *ngFor="let val of arr3; let i = index">
  {{ arr1.length + arr2.length + i + 1 }}. {{ val }}
</div>

方案二：组件方法计算（适合数组数量多或需动态添加数组的场景） #

如果后续可能增加更多数组，写一个通用方法会更易维护，避免模板里重复写长度累加。

组件代码（TypeScript） #

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

@Component({
  selector: 'app-sequential-numbering',
  templateUrl: './sequential-numbering.component.html'
})
export class SequentialNumberingComponent {
  // 把所有数组放到一个大数组里，方便计算前面的总长度
  allArrays = [
    ['Val1', 'Val2', 'Val3'],
    ['Val1', 'Val2', 'Val3'],
    ['Val1', 'Val2', 'Val3']
  ];

  // 计算当前元素的连续序号
  getSerialNumber(arrIndex: number, itemIndex: number): number {
    // 累加当前数组之前所有数组的长度
    const previousTotal = this.allArrays.slice(0, arrIndex).reduce((sum, arr) => sum + arr.length, 0);
    // 加上当前元素的位置（index从0开始，所以+1）
    return previousTotal + itemIndex + 1;
  }
}

模板代码（HTML） #

<div *ngFor="let arr of allArrays; let arrIndex = index">
  <div *ngFor="let val of arr; let itemIndex = index">
    {{ getSerialNumber(arrIndex, itemIndex) }}. {{ val }}
  </div>
</div>

原理说明 #

不管哪种方案，核心逻辑都是：

连续序号 = 当前数组之前所有数组的总元素数 + 当前元素在数组中的索引（index） + 1

因为Angular的*ngFor里的index是从0开始的，所以最后要加1转换成从1开始的序号。

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