离子 2:错误表达式在检查后已更改

Question

我已经阅读了这个答案，这个答案和这个答案(以及许多其他答案(，但我不明白如何以我的方式修复此错误。

基本上，我正在制作一个事件倒数计时器，精确到秒。 每个事件显示最大的剩余两次(即 1 年 2 个月、4 天 12 小时、10 分 25 秒(。

屏幕上有很多事件，都调用同一个函数。 如果我有显示秒的倒计时，我会随机收到此错误Error Expression has changed after it was checked(有时当时间以分钟为单位变化时，我也会收到此错误(。

我的 HTML 看起来像这样：

<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>

打字稿是这样的：

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

当您在开发模式下使用 angular 时，它会仔细检查以检查变量的状态。尝试运行生产版本，以查看差异，但您应该更改不断变化的代码以解决此问题。似乎是你的时间直到功能。

要在生产模式下运行，这个想法是使用 --prod 标志，就像 ionic run android --prod 一样，这将增加enableProdMode()。

但是，您可以尝试在boostrap调用之前在main.ts文件上添加enableProdMode()。

这将解决这个问题，但正如我已经说过的，这不是最好的方法。

Answer 2

好吧，我想通了，尽管我不是 100% 确定为什么。

正如我上面写的，我使用 angular 来显示一个return值，使用 [innerHTML] . 由于某种原因(这是我不知道为什么的部分(，数据绑定无法处理"返回"值，而是需要接受一个简单的变量。 我已将其从

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

其中函数timeUntil()使用返回来显示我想要的内容：return firstDur + secondDur;

自

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

其中，我在setTimeout中触发我的timeUntil()函数(如始终运行(并更改变量。

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++
        }
    }
}

因此，出于某种原因，在这种情况下返回值而不是将值设置为变量是不好的。