ionChange - 检测Ionic 2中仅从视图到模型的变化

时间:2017-03-22 15:50:39

标签: android angular typescript ionic2 reminders

我有一个Ionic 2应用程序,允许安排通知(提醒)。

嗯,重要的是:

  • 当用户进入提醒页面时,应该检查一个 保存提醒。
  • 如果有保存的提醒(我实际上正在保存此信息) 存储),时钟应出现保存提醒时间和 处于活动状态的切换。

  • 此时,时钟应显示实际时间,并切换到 假状态(停用)。

这很有效。我可以保存提醒,一切正常,并禁用它们。

当我有一个已保存的提醒并且我进入该页面时会出现问题,它会显示“提醒已保存”的通知,当然,实际发生的是当我进入该状态时页面,如果有保存的提醒,它首先证实,如果是,则激活切换。此切换链接到事件(ionChange),因为它是我用来处理提醒的激活/停用的那个。 然后每当我进入页面并且有一个保存的提醒时,它会将切换设置为true,然后默认情况下它会初始化为false并且(ionChange)检测到有更改,事件再次被触发,这就是为什么它结束了我再次保存提醒。

这不是那么糟糕,但每次进入都不应该保存提醒。

我在考虑使用click事件代替ionChange,但它不起作用。

这是我的代码:

HTML

<ion-content padding>
    <div class="selector">
        <ion-item>
            <ion-label>Recordatorio</ion-label>
            <ion-toggle class="toggle" [(ngModel)]="toggleStatus" checked="true" (click)="changeToggle()"></ion-toggle>
        </ion-item>
        <ion-item>
            <ion-label>Horario</ion-label>
            <ion-datetime
                pickerFormat="HH:mm"
                [(ngModel)]="time"
                (ngModelChange)="timeChanged()"
                cancelText="Cancelar"
                doneText="Aceptar">
            </ion-datetime>
        </ion-item>
    </div>
</ion-content>

打字稿:

    ionViewWillEnter(): void {

        this.setDefaultProperties();
    }

    public setDefaultProperties(): void {

        this.date = new Date();
        this.setDefaultPickerTime();
        this.setToggleStatus();
    }

    public setDefaultPickerTime(): void {

        this.storage.get('reminderTime')
            .then((result) => {

                if (result) {
                    this.time = result;
                } else {

                    let actualTime: string = this.actualFormattedTime();
                    this.time = actualTime;
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }

    public setToggleStatus(): void {

        this.storage.get('reminderToggleStatus')
            .then((result) => {
                this.toggleStatus = result;
            })
            .catch((err) => {
                console.log(err);
            });
    }

    public timeChanged(): void {

        if (this.toggleStatus === true) {
            this.saveReminder();
        }
    }

    public changeToggle(): void {

        if (this.toggleStatus === true) {
            this.saveReminder();
        } else {
            console.log("deselecciono");
            this.deleteReminder();
            this.deleteStoredReminderData();
            this.showDeleteReminderMsg();
        }
    }

    public deleteReminder(): void {

        LocalNotifications.cancelAll()
            .then((succes) => {
                //
            })
            .catch((err) => {
                console.log(err);
            });
    }

    public deleteStoredReminderData(): void {

        this.storage.remove('reminderTime')
            .then(() => {
                console.log("Tiempo eliminado");
            })
            .catch((err) => {
                console.log(err);
            });

        this.storage.remove('reminderToggleStatus')
            .then(() => {
                console.log("Toggle status eliminado");
            })
            .catch((err) => {
                console.log(err);
            });
    }

    public timePicked(): boolean {

        if (this.time) {
            return true;
        } else {
            return false;
        }
    }

    public saveReminder(): void {

        if (this.timePicked()) {

            var scheduleDate = new Date(this.actualDate() + ' ' + this.time);

            LocalNotifications.schedule({
                id: 1,
                text: '¡Hora de meditar!',
                //at: new Date(new Date().getTime() + 5),
                at: scheduleDate,
                sound: 'file://audio/sound.mp3',
                every: "day",
                //data: { message : 'Informacion' },
                //icon: 'res://icon',
                //smallIcon: 'res://ic_popup_sync'
            });

            this.persistToggleStatus();
            this.persistTime();
            this.showSavedReminderMsg();
        } else {
            this.showNoTimePickedError();
            setTimeout(() => {
                this.toggleStatus = false;
            }, 100)
        }

    }

    public persistToggleStatus(): void {

        this.storage.set('reminderToggleStatus', this.toggleStatus);
    }

    public persistTime(): void {

        this.storage.set('reminderTime', this.time);
    }

我只包含相关代码..

简而言之:我需要知道我是否只能从视图中触发(ionChange)并阻止它在从控制器检测到模型发生变化时被激活。 / p>

提前非常感谢!!

1 个答案:

答案 0 :(得分:9)

我使用(ngModelChange)代替(ionChange)

解决了这个问题