ExpressionChangedAfterItHasBeenCheckedError Angular7

Question

I have this error at runtime

i tried a few things but none seem to work. the problem occurs because of this

      <div class="items" *ngFor="let infection of missionData?.infections; let i = index;"
   (mouseenter)="infection.hover=true;"
   (mouseleave)="infection.hover=false;">


      <sat-popover #infectionPopovers xAlign="center" yAlign="below">
          <div class="custom-tip small-tip">
            <div class="header">
              {{hoveredInfection?.tip}}
            </div>
          </div>
        </sat-popover>


    <span class="name">{{infection.infection?.name}}</span>
    <span  class="device-status">

      <app-svg-icon   
      *ngIf="infPopovers?.first" 
      (mouseenter)="hoveredInfection = infection;getInfectionPopover(i).open();"
      (mouseleave)="hoveredInfection = null;getInfectionPopover(i).close();"
      [satPopoverAnchorFor]="getInfectionPopover(i)" [name]="infection.infection.state"  [size]="18"></app-svg-icon>
    </span>
  </div>

the infPopovers is defined as a QueryList<SatPopover>

  @ViewChildren('infectionPopovers') public infPopovers: QueryList<SatPopover>;

and this is the getInfectionPopover(index) (maybe it is necessary for understanding)

getInfectionPopover(index): SatPopover{
return this.infPopovers.find((p, i) => i === index);
}

everything works fine actually but i just want to get rid of this error.

This error usually appears because you set a variable value after the variable has been checked by the lifecycle. Please post all of your code (especially the code of your functions, such as `getInfectionPopover` ), not only the code of what you think is the issue. — , Jan 28 '19 at 09:30
@KLTR look at this answer https://stackoverflow.com/questions/54072065/after-child-has-been-initialised-operation-from-parent-component-on-child-dom-c/54072543#54072543 — Abhishek, Jan 28 '19 at 09:30
@Abhishek Thank you! i have just added this line `ngAfterViewChecked(): void { this._cd.detectChanges(); }` and it removed the error. — KLTR, Jan 28 '19 at 09:35

ExpressionChangedAfterItHasBeenCheckedError Angular7

0 Answers0