After going through this response, this solution and this advice (as well as numerous others), I still find myself struggling to comprehend how to resolve this issue in my current approach.
The task at hand involves creating an event countdown timer that displays the two largest remaining time intervals, such as 1 year, 2 months, 4 days, 12 hours, 10 minutes, and 25 seconds.
Despite having multiple events on the screen all calling the same function, I keep encountering the error message:
Error Expression has changed after it was checkedBelow is a snippet of my HTML structure:
<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>
Accompanied with the TypeScript implementation:
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;
}
}
Despite reviewing various answers, the concept still eludes me. Could someone provide further insights or guidance regarding this matter?