Angular 2-日期管道异常:表达在检查后发生了变化



我正在使用组件内的date -pipe将时间戳转换为可读的表达式。但是一旦加载了文档,我会得到例外:

例外:http://localhost中的错误:3000/app/ivever/user-interest.component.html:15:15引起的:表达式在检查后发生了变化。先前的值:'6可。2017'。当前值:'5可。2017'。

任何人都可以向我解释一下这里发生了什么。这是基本代码:

user-interest.component.html

<p md-line>{{getFolderLastLearningSessionDate(folder.learningSessions)}}</p>

user-interest.component.ts

getFolderLastLearningSessionDate(sessions:Array<LearningSession>):string {
    if (sessions)
      try {
        return this.learningSessionService.getLearningSessionDate(this.learningSessionService.getLastLearningSession(sessions));
      } catch (ex) {
        console.log(ex);
      }
    else return "Folder have not bean studied yet";
  }

Learning-sessions.service.ts

public getLearningSessionDate(session:LearningSession):string {
    let datePipe = new DatePipe("uk-UA");
    return datePipe.transform(session.sessionDate);
  }
public getLastLearningSession(sessions:Array<LearningSession>):LearningSession {
    if (sessions) {
      return sessions.sort(
        (session1:LearningSession, session2:LearningSession) => {
          return session2.sessionDate.getDate() - session1.sessionDate.getDate();
        }).shift();
    }
    else
      throw new Error("folder is not studied yet");
  }

当更改检测导致模型变化时,会抛出此错误。

在DevMode Angular中进行第一个变化后进行额外的更改检测转弯,并检查模型是否在第一个和第二个转弯之间进行了更改。如果确实如此,那么您会收到您提到的错误消息。

在您的情况下,这可能是由于绑定到在后续调用中返回不同值的方法

引起的
{{getFolderLastLearningSessionDate(folder.learningSessions)}}

与方法结合是有问题的,尤其是如果随后的调用可以返回不同的值(具有相同属性和相同属性值的不同对象实例被认为是不同的)。

因此,最好注册一些事件处理程序并在此类事件处理程序中更新类场,然后绑定到类场。

相关内容

最新更新