Angular中ExpressionChangedAfterItHasBeenCheckedError问题求助

在Angular开发中遇到ExpressionChangedAfterItHasBeenCheckedError错误，需求是根据FormGroup（fg）中的treesGridArray数据计算并展示百分比值，推测是数据变更导致该错误，但尝试了ngAfterViewChecked等方法均未解决，以下是具体解决建议：

问题代码 #

TS代码：

calcPercentageToUnproot() {
    //:number
    let trees: FOTreeInfoModel[] = this.fg.get("treesGridArray").value;
    trees.forEach(element => {
      if(element.actionReasonID.code==eActionReason.Unproot)
      {
        this.unprootSum=this.unprootSum+element.quantityOfTrees;
        this.allcalcTrees=this.allcalcTrees+element.quantityOfTrees;
      }
      else{
        this.allcalcTrees=this.allcalcTrees+element.quantityOfTrees;
      }
    });

    if (this.allcalcTrees > 0) {
      this.treesPercentageToUnproot = Math.floor(
        (this.unprootSum * 100) / this.allcalcTrees
      );
    } else if (this.allcalcTrees == 0) {
      this.treesPercentageToUnproot =null;
    }
}

HTML代码：

<h4 *ngIf="treesPercentageToUnproot" class="p-col-12 mr-1rem">{{treesPercentageToUnproot}}%</h4>

解决建议 #

• 优先方案：监听表单数组的valueChanges
  问题根源是在变更检测周期内直接修改组件属性，导致Angular检测到值在检测完成后又变化。正确的做法是监听treesGridArray的数值变化，在订阅回调中执行计算，这样计算逻辑会在变更检测之外触发：

  import { OnInit } from '@angular/core';
  import { FormGroup } from '@angular/forms';
  
  export class YourComponent implements OnInit {
    unprootSum = 0;
    allcalcTrees = 0;
    treesPercentageToUnproot: number | null = null;
  
    constructor(private fg: FormGroup) {}
  
    ngOnInit() {
      // 监听treesGridArray的数值变化
      const treesArrayControl = this.fg.get('treesGridArray');
      treesArrayControl?.valueChanges.subscribe(trees => {
        this.calculatePercentage(trees);
      });
  
      // 初始化时执行一次计算
      const initialTrees = treesArrayControl?.value || [];
      this.calculatePercentage(initialTrees);
    }
  
    private calculatePercentage(trees: FOTreeInfoModel[]) {
      // 每次计算前重置总和，避免累加错误
      this.unprootSum = 0;
      this.allcalcTrees = 0;
  
      trees.forEach(element => {
        if (element.actionReasonID.code === eActionReason.Unproot) {
          this.unprootSum += element.quantityOfTrees;
        }
        this.allcalcTrees += element.quantityOfTrees;
      });
  
      this.treesPercentageToUnproot = this.allcalcTrees > 0 
        ? Math.floor((this.unprootSum * 100) / this.allcalcTrees)
        : null;
    }
  }
  

• 修复原方法的累加bug
  原代码中每次调用calcPercentageToUnproot都没有重置unprootSum和allcalcTrees，会导致数值持续累加，最终计算结果完全错误，上述方案已经包含了这个修复。

• 兜底方案：手动触发变更检测
  如果必须在变更检测钩子中执行计算，可以注入ChangeDetectorRef，在修改属性后手动触发检测，避免错误：

  import { ChangeDetectorRef, AfterViewChecked } from '@angular/core';
  
  export class YourComponent implements AfterViewChecked {
    constructor(private cdr: ChangeDetectorRef) {}
  
    ngAfterViewChecked() {
      this.calcPercentageToUnproot();
      // 手动触发变更检测，让Angular重新检查组件状态
      this.cdr.detectChanges();
    }
  
    // 注意：需要给原方法添加重置总和的逻辑
    calcPercentageToUnproot() {
      this.unprootSum = 0;
      this.allcalcTrees = 0;
      let trees: FOTreeInfoModel[] = this.fg.get("treesGridArray").value;
      trees.forEach(element => {
        if(element.actionReasonID.code==eActionReason.Unproot)
        {
          this.unprootSum += element.quantityOfTrees;
        }
        this.allcalcTrees += element.quantityOfTrees;
      });
  
      this.treesPercentageToUnproot = this.allcalcTrees > 0 
        ? Math.floor((this.unprootSum * 100) / this.allcalcTrees)
        : null;
    }
  }
  

  注意：此方法不推荐作为首选，可能引发性能问题或循环检测。

• 模板优化
  原模板的*ngIf="treesPercentageToUnproot"会在值为0时隐藏元素（0在Angular中被视为false），如果需要展示0%，修改为：

  <h4 *ngIf="treesPercentageToUnproot !== null" class="p-col-12 mr-1rem">{{treesPercentageToUnproot}}%</h4>
  

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