イオン2：エラーチェックした後に式が変化しました

Question

this answer,とthis answerを読んだことがありますが、このエラーを修正する方法はわかりません。

基本的には、カウントダウンタイマーを秒単位で作成しています。各イベントには、残りの2回（1年、2か月、4日12時間、10分25秒）の最大のものが表示されます。

私は同じ機能を呼び出す多くのイベントを画面に表示しています。私は無作為にこのエラーError Expression has changed after it was checkedを表示します（何時に時間が数分で変化するか、時にはこのエラーが出ることもあります）。

<ion-header> 
    <ion-navbar> 
     <ion-title> 
      <h2>{{theTime}}</h2> 
     </ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding-top padding-bottom> 
    <ion-fab right bottom> 
     <button ion-fab color="primary" (click)='goToEventUpsert()'> 
      <ion-icon name="add"></ion-icon> 
     </button> 
    </ion-fab> 
    <ion-card class="event" *ngFor="let event of events | OrderBy : 'dateTimeEpoch'" id="id-{{event.id}}"> 
     <div class="event__container"> 
      <div class="event__container__countdown" color="light" [innerHTML]="timeUntil(event.dateTime)"></div> 
     <div class="event__container__details"> 
      ... 
     </div> 
    </ion-card> 
</ion-content> 

そしてtypescriptですが、このような次のとおりです：私のHTMLはそうのように見える

ので

export class HomePage { 
    constructor(...) { 
     this.getCurrentTime(); 
     setInterval(() => this.getCurrentTime(), 100); 
    } 

    getCurrentTime() { 
     this.theTime = moment().format("h:mm a"); 
    } 

    timeUntil(date) { 
     var dur = moment.duration(moment(date).diff(moment())); 
     let yearsRemain = dur.years(); 
     let monthsRemain = dur.months(); 
     let daysRemain = dur.days(); 
     let hoursRemain = dur.hours(); 
     let minutesRemain = dur.minutes(); 
     let secondsRemain = dur.seconds(); 

     var dateArray = [ 
      yearsRemain, 
      monthsRemain, 
      daysRemain, 
      hoursRemain, 
      minutesRemain, 
      secondsRemain 
     ] 

     for(var i = 0; i < dateArray.length; i++) { 
      if(dateArray[i] > 0){ 
       var firstDur = dateArray[i] + this.typeOfTime(i, dateArray[i]); 
       var secondDur = dateArray[i+1] !== 0 ? dateArray[i+1] + this.typeOfTime(i+1, dateArray[i+1]) : dateArray[i+2] + this.typeOfTime(i+2, dateArray[i+2]); 
       return firstDur + secondDur; 
      } else if(dateArray[i] < 0) { 
       return (dateArray[i] * (-1)) + this.typeOfTime(i, (dateArray[i] * (-1))) + " ago"; 
      } else { 
       i++ 
      } 
     } 
    } 

    typeOfTime(type, num) { 
     var display; 
     var plur = num === 1 ? "" : "s"; 
     switch(type) { 
      case 0: 
       display = "Year" + plur; 
       break; 
      case 1: 
       display = "Month" + plur; 
       break; 
      case 2: 
       display = "Day" + plur; 
       break; 
      case 3: 
       display = "Hour" + plur; 
       break; 
      case 4: 
       display = "Minute" + plur; 
       break; 
      case 5: 
       display = "Second" + plur; 
       break; 
     } 
     return display; 
    } 
} 

私が言ったように、私は答えを読んで、私は理解していません。誰も私のためにこれについていくつかの光を当てることができますか？

Answer 1

開発モードで角度を使用して作業している場合は、変数の状態を確認するために再度チェックします。 プロダクションビルドを実行してその違いを確認してください。ただし、この問題を解決するためには常に変化するコードを変更する必要があります。 あなたのtimeUntil関数であると思われます。

生産モードで実行するには、ionic run android --prodのように--prodフラグを使用することが考えられます。これにはenableProdMode()が追加されます。

boostrapコールの前に、をmain.tsファイルに追加することができます。

これはこの問題を解決しますが、すでに述べたように、これは最良のアプローチではありません。

Answer 2

申し訳ありませんが、私はこれを理解しましたが、理由は100％確信していません。

上記のように、[innerHTML]を使用してreturnの値を表示するには、角度を使用しています。なんらかの理由（これは私にはわからない部分です）では、データバインディングは "戻り値"を扱うことができず、単純な変数を取る必要があります。私は機能timeUntil()は、私が何を望むかを示すためにリターンを使用

<div class="event__container__countdown" color="light" [innerHTML]="timeUntil(event.dateTime)"></div> 

からそれを変更しました：return firstDur + secondDur;

を

私は setTimeoutの内側に私の timeUntil()機能を発射、

<div class="event__container__countdown" color="light"> 
    {{timePrimary}} {{timePrimaryType}} {{timeSecondary}} {{timeSecondaryType}} 
</div> 

へ（常に実行するように）、変数を変更します。

timePrimary: number; 
timePrimaryType: string; 
timeSecondary: number; 
timeSecondaryType: string; 

constructor() { 
    this.timeUntil(this.timeUntilValue); 
    setInterval(_ => this.timeUntil(this.timeUntilValue)); 
} 
timeUntil(date) { 

    //...All the same variable declarations... 

    for(var i = 0; i < dateArray.length; i++) { 
     if(dateArray[i] > 0){ 
      this.timePrimary = dateArray[i]; 
      this.timePrimaryType = this.typeOfTime(i, dateArray[i]); 
      this.timeSecondary = dateArray[i+1] !== 0 ? dateArray[i+1] : dateArray[i+2]; 
      this.timeSecondaryType = dateArray[i+1] !== 0 ? this.typeOfTime(i+1, dateArray[i+1]) : this.typeOfTime(i+2, dateArray[i+2]); 
      break; 
     } else if(dateArray[i] < 0) { 
      this.timePrimary = dateArray[i] * (-1); 
      this.timePrimaryType = this.typeOfTime(i, (dateArray[i] * (-1))) + " ago"; 
      break; 
     } else { 
      i++ 
     } 
    } 
} 

ので、何らかの理由で、値を返すのではなく、変数に値を設定すると、このような状況では無意味です。