ionChange - 检测离子2中仅从视图到模型的变化 [英] ionChange - detect changes only from view to model in Ionic 2

问题描述

我有一个Ionic 2应用程序，它允许日程安排通知（提醒）。

I have an Ionic 2 app that allows schedule notifications (a reminder).

嗯，重要的是：

• 当用户进入提醒页面时，应该检查
  保存的提醒。



• 如果有保存提醒（我实际上是用
  存储保存此信息），时钟应该会显示保存提醒时间，
  切换处于活动状态。

• When the user enters into the reminder page, it should check for a saved reminder.

• If there is a saved reminder (I'm actually saving this info with storage), the clock should appear with the reminder time saved and the toggle in active state.

此时，时钟应显示实际时间，并且切换为
false状态（已停用）。

Else the clock should appear with the actual time, and the toggle in false state (deactivated).

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

This works well. I can save reminders and everything works fine, as well as disable them.

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

The problem occurs when I have a saved reminder and I enter the page, it shows me the notification of "Reminder saved" and of course, what actually happens is that, when I enter to that page, it first corroborates if there is a saved reminder, and if it's true, the toggle is activated. This toggle is linked to the event (ionChange) since it is the one I use to handle the activation / deactivation of the reminder. Then every time I enter the page and there is a saved reminder, it sets the toggle to true, and then as default it initializes to false and (ionChange) detects that there was a change, the event is triggered again, that's why it ends me Saving the reminder again.

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

It is not that bad, but it should not save the reminder every time I enter.

我正在考虑使用点击事件 ionChange ，但它不起作用。

I was thinking of using the click event instead of ionChange, but it did not work.

这是我的代码：

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);
    }

我只包含相关代码..

I only included the relevant code..

简而言之：我需要知道我是否只能从视图中触发（ionChange）并防止它出现当它从控制器检测到模型发生变化时激活。

In short: I need to know if I can fire (ionChange) only from the view and prevent it from being activated when it detects a change in the model, from the controller.

提前感谢这么多!!

推荐答案

我解决了它：（ngModelChange）而不是（ionChange）

这篇关于ionChange - 检测离子2中仅从视图到模型的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！