Question

我已阅读this answer，this answer和this answer（以及其他许多人），但我不明白如何以我的方式修复此错误。

基本上，我正在制作一个事件倒数计时器，直到秒。每个事件显示剩余最多两次（即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

在开发模式中使用角度时，会进行双重检查以检查变量的状态。尝试运行生成版本，以查看差异，但您应该更改不断更改的代码以解决此问题。似乎是你的时间直接功能。

要在生产模式下运行，我们的想法是使用--prod标记，例如ionic run android --prod，这将添加enableProdMode()。

但您可以在enableProdMode()来电之前尝试在main.ts文件中添加boostrap。

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

Answer 2

好吧，我想出来了，虽然我不是百分之百确定原因。

如上所述，我使用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>

在哪里，我在timeUntil()中激活setTimeout函数（以便始终运行）并更改变量。

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

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

离子2：错误表达在检查后发生了变化

2 个答案: