评论下面的div结构错误正在消失

Question

升级到 Angular 5 后，我遇到了这个错误：

ExpressionChangedAfterItHasBeenCheckedError: 表达式有 检查后改了。以前的值：'ngIf：未定义'。 当前值：'ngIf: null'。

如果我评论下面的 div 结构，错误就会消失

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

知道如何解决这个问题吗？

<!-- 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="#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="#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="#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>-->

Answer 1

您可能会异步获取此值，您可以尝试：

• 在你的@Component（选择器之前）上使用changeDetection: ChangeDetectionStrategy.OnPush，在你的.ts文件中，不要忘记从“@angular/core”导入changeDetection；

• 尽量不要异步获取值，使用setTimeout()函数获取值；

• 在你的模块上注入cdr: ChangeDetectorRef并从你的“@angular/core”导入它，然后在你实现的ngAfterViewChecked上输入this.cdr.detectchanges。

为了提供更好的答案，您需要发布您的 .ts 代码，并删除一些行以使代码更简洁。希望对您有所帮助！