Question

我对这个错误感到困惑，我发现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'.

Answer 1

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

另一方面，

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

<小时/> 来自规范：

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

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

<小时/> 就个人而言，我不会使用ngAfterContentInit()，除非我试图在DOM中查询某些元素然后对其进行操作，如Jquery动画或其他某些行。

错误：ExpressionChangedAfterItHasBeenCheckedError：

1 个答案: