错误：ExpressionChangedAfterItHasBeenCheckedError：答案

【问题标题】：Error: ExpressionChangedAfterItHasBeenCheckedError:错误：ExpressionChangedAfterItHasBeenCheckedError：
【发布时间】：2018-09-17 16:41:48
【问题描述】：

我对这个错误感到困惑，我有 ExpressionChangedAfterItHasBeenCheckedError 错误，我试图理解 ngAfterContentInit 但我不确定如何在我的情况下使用它，如果有人可以让我知道为什么会出现这个问题发生。 _state 用于防止循环调用。

  private password_disabled: any;
  private sudo: any;
  private locked: any;
  private password_disabled_state = false;
  private sudo_state = false;
  private locked_state = false;


 constructor(.....) {}


  afterInit(entityForm: any) {
    this.isNew = entityForm.isNew;
    this.password_disabled = entityForm.formGroup.controls['password_disabled'];
    this.sudo = entityForm.formGroup.controls['sudo'];
    this.locked = entityForm.formGroup.controls['locked'];

    this.password_disabled.valueChanges.subscribe((password_disabled)=>{
      if(password_disabled && !this.sudo_state && !this.locked_state){
        entityForm.setDisabled('sudo', password_disabled);
        entityForm.setDisabled('locked', password_disabled);
        this.password_disabled_state = password_disabled;
      } else {
        this.password_disabled_state = !this.password_disabled_state;
        entityForm.setDisabled('sudo', !this.sudo_state);
        entityForm.setDisabled('locked', !this.locked_state);

      }
    })
    this.locked.valueChanges.subscribe((locked)=>{
      if(locked && !this.password_disabled_state){
        entityForm.setDisabled('password_disabled', locked);
        this.locked_state = locked;
      }
      else{
        this.locked_state = !this.locked_state;
      }
    });

    this.sudo.valueChanges.subscribe((sudo)=>{
      if(sudo && !this.password_disabled_state){
        entityForm.setDisabled('password_disabled', sudo);
        this.sudo_state = sudo;
      }
      else{
        this.sudo_state = !this.sudo_state;
      }
    });

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'id: true'. Current value: 'id: false'.

【问题讨论】：

所有这些标志的存在是一种严重的设计气味。您可能会遇到各种问题，您的逻辑将无法维护
嗯，好的，我同意，但这就是我目前所拥有的。如果你愿意，建议我一个更好的方法:)
嗯...将内容存储在表单字段和组件类的属性中是个坏主意

标签： angular typescript

【解决方案1】：

如果您从 afterInit 更改为 ngOnInit，这可能会自行解决。这是错误的，因为 html 刚刚从组件模板生成，但是您正在修改用于生成 html 的值。所以它用这个错误向你抱怨。

ngOnInit 另一方面将允许在从模板生成 html 之前修改这些值。

从规范：

ngAfterContentInit()
在 Angular 将外部内容投射到组件的视图中/指令所在的视图之后响应。在第一个 ngDoCheck() 之后调用一次。

ngOnInit()
在 Angular 首次显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。在第一个 ngOnChanges() 之后调用一次。

就个人而言，我不使用ngAfterContentInit()，除非我尝试查询DOM 中的某个元素然后对其进行操作，例如Jquery 动画或类似的东西。

【讨论】：