Angular 4中嵌套*ngFor循环内实现局部count变量递增及复用

兄弟，我太懂你在Angular 4里搞嵌套循环时想弄个局部递增count的痛点——直接在模板里写{{count=count+1}}虽然能蹦出数字，但这种写法不仅踩了Angular模板表达式的红线（有副作用），而且count很容易变成不受控的全局变量，没法精准控制范围对吧？

下面给你几个符合Angular规范的解决方案，按需选就行：

方案一：提前在组件里预处理数据（最推荐） #

把count的计算逻辑移到组件类里，给每个内层元素提前挂上对应的全局索引，模板里直接用就好，完全不用在模板里搞复杂计算：

// 组件类代码
prop: any[]; // 你的原始数据
processedProp: any[];

ngOnInit() {
  let globalCount = 0;
  // 遍历原始数据，给每个values元素加上count属性
  this.processedProp = this.prop.map(item => {
    return {
      ...item,
      values: item.values.map(val => {
        return {
          ...val,
          count: globalCount++
        };
      })
    };
  });
}

模板里这么用：

<div *ngFor="let p of processedProp">
  <div *ngFor="let a of p.values">
    Count is {{a.count}}。
    <!-- 直接复用count取数据：{{Values[a.count].Name}} -->
  </div>
</div>

这个方法逻辑清晰，模板干净，而且count是提前计算好的，不会受Angular变更检测的影响，性能也最稳。

方案二：利用*ngFor的index属性计算count #

如果不想修改原始数据，可以在外层和内层循环里分别拿到index，通过组件方法计算当前的全局count：

// 组件类里的计算方法
getGlobalCount(outerIndex: number, innerIndex: number): number {
  // 先算当前外层之前所有元素的values总长度，再加当前内层的index
  let total = 0;
  for (let i = 0; i < outerIndex; i++) {
    total += this.prop[i].values.length;
  }
  return total + innerIndex;
}

模板里调用这个方法：

<div *ngFor="let p of prop; let i = index">
  <div *ngFor="let a of p.values; let j = index">
    Count is {{getGlobalCount(i, j)}}。
    <!-- 复用count：{{Values[getGlobalCount(i, j)].Name}} -->
  </div>
</div>

这个方法适合不想动原始数据的场景，但如果你的prop数组很大，每次变更检测都会调用这个方法循环计算，可能会有性能损耗，这时候还是方案一更靠谱。

避坑提醒 #

千万别再用{{count=count+1}}这种写法了！Angular的变更检测机制会反复执行模板表达式，导致count的值乱跳，而且这也违反了Angular模板表达式应该是**纯函数（无副作用）**的最佳实践。

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