角度错误:ExpressionChangedAfterItHasBeenCheckedError

时间:2017-05-17 07:00:43

标签: angular runtime-error

我对Angular 4有点问题。 抛出以下错误

  

错误:ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化。之前的价值:'225px'。当前值:' - 21150px'。

这是我的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';
}

有人可以告诉我,为什么会这样?

4 个答案:

答案 0 :(得分:3)

发生此错误是因为您在角度输出HTML之前更改变量。 所以,你能做的是。加载内容时更改变量。 溶液

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

ngAfterContentInit(){
   // write your code here
}

答案 1 :(得分:3)

检查后组件状态发生了变化......

使用

this._changeDetectionRef.detectChanges();

在您的方法结束时,不要忘记添加

private _changeDetectionRef : ChangeDetectorRef

作为拥有方法的Component的构造函数的参数。

参见discution here

答案 2 :(得分:1)

快速解决方法是将您的代码放在setTimeout()中。

答案 3 :(得分:0)

我输出了同样的错误。经过长时间的研究,我发现当输入到html模板的数据在角度刷新html之前发生了变化时就会发生这种情况。切换到生产模式时,不会显示此错误。有关详细信息,请参阅此issue