Nativescript: Label text don't update when ts change text

[Leo-lay]

hi,i write a counter down ,

in my ts has a method to change the text timerVerifyCode but the ui don't update,

counterDown() { let counterDown = 60; this.getCoding = true; let timerCounter = setInterval(function () { counterDown--; console.log('counterDown=>', counterDown); this.timerVerifyCode = counterDown + 'after request'; console.log('counterDown=>', counterDown); console.log('timerVerifyCode=>', this.timerVerifyCode); if (counterDown <= 0) { clearInterval(timerCounter); this.timerVerifyCode = 'request code'; } }, 1000); }

<Label dock="right" [text]="timerVerifyCode" class="text-color"></Label>

how to update label text when ts change ?

[NickIliev]

Hey @Leo-lay

There are several possible reasons for your one-way binding to not work as expected.
The first possibility is that you have not added NativeScriptFormsModule in your NgModule

import { NativeScriptFormsModule } from "nativescript-angular/forms";
...
@NgModule({
    ...
    imports: [NativeScriptModule, NativeScriptFormsModule],
})

Another possible solution is to change the detection strategy from default to onPush.

Here is your code will look like:

// import ChangeDetectorRef, ChangeDetectionStrategy
import { Component, ChangeDetectorRef, ChangeDetectionStrategy } from "@angular/core";
import { Label } from "ui/label";
import { Page } from "ui/page";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush // change the strategy
})
export class AppComponent {
    public timerVerifyCode: string;

    constructor(private changeRef: ChangeDetectorRef) { } // create reference in the constructor

    counterDown() {
        let counterDown = 60;
        this.getCoding = true;
        let timerCounter = setInterval(() => {
            counterDown--;
            console.log('counterDown=>', counterDown);
            this.timerVerifyCode = counterDown + 'after request';
            this.changeRef.markForCheck(); // when needed mark for check

            console.log('counterDown=>', counterDown);
            console.log('timerVerifyCode=>', this.timerVerifyCode);
            if (counterDown <= 0) {
                clearInterval(timerCounter);
                this.timerVerifyCode = 'request code';
                this.changeRef.markForCheck(); // when needed mark for check
            }
        }, 1000);
    }
}

[Leo-lay]

@NickIliev cool~thank you so much~ that's fix my problem.& closed

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.