ExpressionChangedAfterItHasBeenCheckedError Angular7

Question

运行时出现此错误

我尝试了一些操作，但似乎没有任何效果。发生此问题是因为

      <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>

infPopovers被定义为QueryList<SatPopover>

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

这是getInfectionPopover（index）（可能需要理解）

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

一切正常，但我只想摆脱此错误。