Ошибка: ExpressionChangedAfterItHasBeenCheckedError:

avatar
vector8188
8 апреля 2018 в 00:45
565
1
0

Меня смущает эта ошибка, где у меня ошибка 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'.
Источник
Aluan Haddad
8 апреля 2018 в 00:51
0

Наличие всех этих флагов — серьезный дизайнерский запах. Вы, вероятно, столкнетесь со всевозможными проблемами, и ваша логика не будет поддерживаться

vector8188
8 апреля 2018 в 01:13
1

хм, хорошо, я согласен, но это то, что у меня есть на данный момент. предложите мне лучший подход, если хотите :)

Aluan Haddad
8 апреля 2018 в 01:33
0

ну... хранить вещи как в полях формы, так и в свойствах класса компонента - плохая идея

Ответы (1)

avatar
Zze
8 апреля 2018 в 02:54
0

Это, скорее всего, разрешится само собой, если вы измените afterInit на ngOnInit. Это ошибка, потому что html только что был сгенерирован из шаблона компонента, но затем вы изменяете значения, которые использовались для создания html. так он у вас жалуется на эту ошибку.

ngOnInit, с другой стороны, позволит изменить эти значения до того, как HTML-код будет сгенерирован из шаблона.


Из спецификации:

ngAfterContentInit()
Ответ после того, как Angular проецирует внешний контент в представление компонента/представление, в котором находится директива. Вызывается один раз после первого ngDoCheck().

ngOnInit()
Инициализируйте директиву/компонент после того, как Angular сначала отобразит свойства, связанные с данными, и установит входные свойства директивы/компонента. Вызывается один раз, после первого ngOnChanges().


Лично я не использую ngAfterContentInit(), если только я не пытаюсь запросить DOM для какого-либо элемента, а затем воздействовать на него, например, анимацию Jquery или что-то в этом роде.