What it means: ERROR Error: Expressionchangedafterithasbeencheckeoverthrow

Asked

Viewed 2,537 times

3

Areareservadacomponentcomponent.html:2 ERROR Error: Expressionchangedafterithasbeencheckederror: Expression has changed after it was checked. Previous value: 'Hidden: Undefined'. Current value: 'Hidden: true'. viewDebugError (core.js:9771) at expressionChangedAfterItHasBeenCheckedError (core.js:9749) checkat checkBindingNoChanges (core.js:9916) checkat checkNoChangesNodeInline (core.js:13964) checkat NoChangesNode (core.js:13938) at debugCheckNoChangesNode (core.js:14767) at debugCheckRenderNodeFn (core.js:14707) At object.Eval [as updateRenderer] (Areareareservadacomponentcomponent.html:6) At object.debugUpdateRenderer [as updateRenderer] (core.js:14689) checkat NoChangesView (core.js:13778)

inserir a descrição da imagem aqui

area-reserved-Component.component.html

<app-mapa-de-ferias [hidden]="MapaFeriasIsVisible"></app-mapa-de-ferias>

=========

Menucomponentcomponent.html

 <a class="nav-link"  [routerLink]=""  (click)='MostrarMapaFerias()'>Mapa de Férias</a>

=======

import { Component, ViewChild, AfterViewInit  } from '@angular/core';
import { MenuComponentComponent } from '../menu-component/menu-component.component';

@Component({
  selector: 'app-area-reservada-component',
  templateUrl: './area-reservada-component.component.html',
  styleUrls: ['./area-reservada-component.component.css']
})
export class AreaReservadaComponentComponent implements  AfterViewInit {

  constructor() { }

  @ViewChild(MenuComponentComponent) menu: MenuComponentComponent;
  public MapaFeriasIsVisible: boolean;
  ngAfterViewInit(): void {

if (this.menu.MapaFeriasIsVisible) {
  this.MapaFeriasIsVisible = false;
} else {
  this.MapaFeriasIsVisible = true;
}

   }
}

=============================== Menucomponentcomponent.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';


@Component({
  selector: 'app-menu-component',
  templateUrl: './menu-component.component.html',
  styleUrls: ['./menu-component.component.css']
})
export class MenuComponentComponent  {
  @Input() MapaFeriasIsVisible: boolean;
  constructor()
  {

  }


  public MostrarMapaFerias(): void
  {
    if (this.MapaFeriasIsVisible) {
      this.MapaFeriasIsVisible = false;
    } else {
      this.MapaFeriasIsVisible = true;
    }

  }

}

The goal was to show and hide when clicked on the Map button vacation

angular
  • 1

    Hi Amadeu, good evening! I suggest rewriting the issue so that it is easier to benefit the whole community. The problem ExpressionChangedAfterItHasBeenCheckedError seems pretty common and an answer here would help a lot... and for that, we just need you to restructure your question so that it doesn’t just seem like you share your code and expect a solution.

1 answer

4


Although your question was not very clear, it would be good to take a look at the official documentation of Lifecycle Hooks of Angular, and in this material and this material here which I also think is really good. But, summarizing and explaining a little because it is quite complicated this part of Angular, what happens there is that you using Lifecycle ngAfterViewInit() acting after the views the component/directive has been initialized which seeks for changes in the values and consequently launches this error, because Angular still does not know what value should contain in the directive and then for it the value has changed, as the error itself shows:

Expression has changed after it was checked.

A expressão mudou após ser verificada.

Although this error occurs only in the development environment you can solve it in the following way, change the method:

ngAfterViewInit()

for

ngAfterContentIn()

With the Lifecycle ngAfterContentInit() basically first will be checked if there were changes in the external content of the component and its values.

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.