Angular嵌套*ngFor循环如何实现全局连续递增计数器

你需要在 {{ }} 中填写以下表达式：

adjustments.slice(0, i).reduce((sum, curr) => sum + curr.blades.length, 0) + j + 1

原理说明 #

• 外层循环的i是当前adjustment的索引，adjustments.slice(0, i)取到当前行之前的所有adjustment项
• 通过reduce累加前面所有行的blades数组长度，得到当前行之前的全局计数总和
• 加上内层循环当前索引j，再加1（适配从1开始计数的需求），即可得到连续的全局计数器值

性能优化建议 #

如果adjustments数据量较大，模板中直接执行reduce会在每次变更检测时重复计算，建议提前在组件TS代码中预处理数据，给每个blade项预分配全局序号：

// 组件TS代码中预处理逻辑
let count = 1;
this.adjustments.forEach(adjustment => {
  adjustment.blades = adjustment.blades.map(blade => {
    return { ...blade, globalIndex: count++ };
  })
})

预处理完成后，模板中直接写{{ blade.globalIndex }}即可，运行性能更高。

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