角度錯誤：ExpressionChangedAfterItHasBeenCheckedError

Question

我對Angular 4有一點問題。拋出以下錯誤

錯誤：ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后已更改。 之前的價值：'225px'。 當前價值：' - 215050x'。

這是我的HTML：

<div class="channelRow" *ngFor="let epgChannel of channelGroupEpg?.epgChannels">
    <div class="epgChannelList">
      {{epgChannel.channel.name}}
    </div>
    <template ngFor let-epgDate [ngForOf]="epgChannel.dates">
        <div class="epgEntry" 
          *ngFor="let epgProgram of epgDate.programs" 
          [style.width]="getWidth(epgProgram, epgDate.date)" 
          (click)="selectProgram(epgProgram)" 
          data-toggle="modal" 
          data-target="#detailModal">
            {{epgProgram.title}}
        </div>
    </template>
</div>

這就是錯誤的來源：

getWidth(program: EPGProgram, date: Date) {
  let min = this.helperService.getDurationByProgramInMinutes(program);
  let startDate = new Date(program.start.getFullYear(), program.start.getMonth(), program.start.getDate(), 0, 0, 0, 0);
  let stopDate = new Date(program.stop.getFullYear(), program.stop.getMonth(), program.stop.getDate(), 0, 0, 0, 0);
  if (startDate.getTime() !== date.getTime()) {
      let minNextDay = this.helperService.getMinutesToNextDay(program.start, date);
      min = min - minNextDay;
  } 
  if (stopDate.getTime() !== date.getTime()) {
      let minNextDay = this.helperService.getMinutesToLastDay(program.stop, date);
      min = min - minNextDay;
  }
  let width = min * 5;
  return width.toString() + 'px';
}

有人能告訴我，為什么會這樣？

Answer 1

組件狀態在檢查后發生了變化......

采用

this._changeDetectionRef.detectChanges();

在你的方法結束時，不要忘記添加

private _changeDetectionRef : ChangeDetectorRef

作為擁有您的方法的Component的構造函數的參數。

請參閱這里的討論

Answer 2

發生此錯誤的原因是您在角度輸出HTML之前更改變量。 所以，你能做的是。 加載內容時更改變量。 解。

import { AfterContentInit } from '@angular/core';

ngAfterContentInit(){
   // write your code here
}

Answer 3

快速解決方法是將代碼放在setTimeout（）中。

Answer 4

我輸出了同樣的錯誤。 經過長時間的研究，我發現它是在輸入到html模板的數據在角度刷新html之前發生變化時引起的。 切換到生產模式時，不會顯示此錯誤。 有關更多信息，請參閱此問題 。