comentați structura div de mai jos, eroarea dispare

După actualizarea la Angular 5, mă confrunt cu această eroare:

ExpressionChangedAfterItHasBeenCheckedError: expresia s-a schimbat după ce a fost verificată. Valoarea anterioară: „ngIf: undefined”. Valoarea curentă: „ngIf: null”.

Dacă comentez structura div de mai jos, eroarea dispare

<div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">

Aveți idee cum să remediați asta?

<!-- language-all: lang-or-tag-here -->

<div class="playerpobUpBox playerWindow kPopupConfirmationBox" id="greaterAlertHeader">
  <div class="row playerPopUpGridCollection playerPopUpContent lineHeightInputs">
    <div class="playerContent"></div>
  </div>
  <div class="clearFloat"></div>
  <div class="row playerPopUpFooter textAligncenterImp">
    <button class="commonBtn" type="button" id="greaterAlertOKHeader">OK</button>
  </div>
  <div class="clearFloat"></div>
  <div class="clearFloat"></div>
</div>
<progress-circle></progress-circle>
<div class="leftSlider toggleShow">
  <div class="fixedLeftSlider">
    <div class="leftSliderBox">
      <div class="stars-group" id="accordion">
        <div class="stars stars-default recentsportss">
          <div class="stars-heading active">
            <h4 class="stars-title">
              <a data-toggle="collapse" href="/ro#recentsportss" aria-expanded="true">
                <i class="fa fa-angle-right starsCaret"></i>
                {{recentsportss}}
              </a>
              <span>{{lastTenViewsportss}}</span>
            </h4>
          </div>
          <div id="recentsportss" class="stars-collapse collapse in" aria-expanded="true">
            <div class="stars-body">
              <ul *ngFor="let item of recentsportssList; let k=index;">
                <li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="k<20">
                  <span> {{item.packageName}}
                                            <i id="pinToggle" class="recentsportssRightIcon" (click)="pinUnpin($event,item.sportsNo); $event.stopPropagation();"></i>
                                        </span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="stars stars-default pinnedSection">
          <div class="stars-heading">
            <h4 class="stars-title">
              <a data-toggle="collapse" href="/ro#pinnedSection" aria-expanded="true">
                <i class="fa fa-angle-right starsCaret"></i>
                {{pinnedsportss}} &amp; {{titles}}
              </a>
            </h4>
          </div>
          <div id="pinnedSection" class="stars-collapse collapse in" aria-expanded="true">
            <div class="stars-body pad0Imp">
              <label class="pinnedsportsSubTitle">sportss</label>
              <ul *ngFor="let item of pinnedsportssList; let i=index;">
                <li class="recentList" (click)="opensports($event,item.sportsNo,item.packageName,item.pinnedFlag,item.originatingNetwork);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsNo" *ngIf="i<20">
                  <span>{{item.packageName}}
                    <i id="pinToggle1" class="recentsportssRightIcon" (click)="pinUnpin1($event,item.sportsNo); $event.stopPropagation();"></i>
                  </span>
                </li>
              </ul>
              <!--<ul>
                <li>sports Number One<i class="recentsportssRightIcon"></i></li>
                <li>sports Two<i class="recentsportssRightIcon"></i></li>
                <li>sports Three<i class="recentsportssRightIcon"></i></li>
              </ul>-->
              <label class="pinnedsportsSubTitle borderTopTitle">Titles</label>
              <ul *ngFor="let item of pinnedTitlesList;let k=index;">
                <li class="recentList" (click)="navigateTitlePage($event,item.titleNo);$event.stopPropagation();" *ngIf="k<20">
                    <span>{{item.titleName}}
                                          <i id="pinTitle1" class="recentsportssRightIcon" (click)="pinUnpintitle($event,item.titleNo);$event.stopPropagation();"></i>
                                    </span>
                </li>
                <!--<li>Title Name Number One<i class="recentsportssRightIcon"></i></li>
                <li>Title Name Number two<i class="recentsportssRightIcon"></i></li>
                <li>Title Number 3<i class="recentsportssRightIcon"></i></li>-->
              </ul>
            </div>
          </div>
        </div>
        <div *ngIf="sportsServ?.relatedsportssData" class="stars stars-default pinnedSection">
          <div class="stars-heading">
            <h4 class="stars-title">
              <a data-toggle="collapse" href="/ro#relatedsportss" aria-expanded="true">
                <i class="fa fa-angle-right starsCaret"></i>
                {{sportsServ?.relatedsportssHeading}}
              </a>
            </h4>
          </div>
          <div id="relatedsportss" class="stars-collapse collapse in" aria-expanded="true">
            <div class="stars-body">
              <ul>
                <li *ngFor="let item of sportsServ?.relatedsportssData" (click)="selectedsports($event,item.sportsId,item.sportsName);$event.stopPropagation();" [class.active]="currentsportsId == item.sportsId">{{item.sportsName}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="showHideLeftSliderBtn"></div>
  </div>
</div>
<router-outlet></router-outlet>
<!--<div><sportsSearch style="display:none;" (sportsSearchEmitter)="sportsSearchEmitter($event)"></sportsSearch></div>-->