Why Ionic doesn't update variables content?

@ioclaudio wrote:

Hi guys,
I already had a similar problem with another plugin and I didn’t find a solution.
I can’t understand what I’m doing wrong.

In this app I’m reading the sms sent to the mobile and I’m counting them in a class variable.
I’d like simply to show the value of this counter in the same page.
The problem is that, when the counter increments its value, the value on the page doesn’t change.
I have to change it

This is the code of the function that increments the counter:

    startWatchSMS() {
        if (this.isPluginSupported) {
            SMSReceive.startWatch(
                () => {
                    this.isPluginStarted = true;
                    this.startSpinner();
                    this.smsArrived = 0;
                    document.getElementById('sms_arrived').innerHTML = String(this.smsArrived );

                    document.addEventListener('onSMSArrive', (e: any) => {
                        const IncomingSMS = e.data;
                        console.log('BEFORE:', this.smsArrived);
                        this.smsArrived += 1;
                        console.log('AFTER:', this.smsArrived);
                        document.getElementById('sms_arrived').innerHTML = String(this.smsArrived);
                        this.processSMSData(IncomingSMS);
                    });
                },
                (err) => {
                    console.log('watch start failed', err);
                    this.isPluginStarted = false;
                    this.errorsReceivingSMS += 1;
                    this.stopSpinner();
                }
            );
        }
    }

The log messages show the right data, that is the counter is updated correctly.
This is the page that shows the counters:

    <div class="test_messages">
        <ion-list>
            <ion-item>
                <ion-label color="success">Number of SMS received (method1):</ion-label>{{ smsArrived }}
            </ion-item>
            <ion-item>
                <ion-label color="success">Number of SMS received (method2):</ion-label>
                <ion-input type="text" [ngModel]="smsArrived"></ion-input>
            </ion-item>
        </ion-list>
        <div class="msg_block">Number of SMS received (method3):</div>
        <div class="msg_block" id="sms_arrived">0</div>
    </div>

The problem is that only the method3 show the right value of the variable.
The other two methods show 0 until I stop the plugin.
These are the screenshots:

before429×580 43.3 KB

But, if I stop the plugin, the right value of the variable is shown everywhere:

after432×580 45.2 KB

Why the variables are not updated?
And why if I act directly on the Dom of the page it works?

I’ve published the code I’m using here:

Thank you very much

cld

Posts: 1

Participants: 1

Read full topic