NativeScript TS：点击按钮后Label值未在视图更新求助

问题原因 #

你直接修改了Observable子类的实例属性_geo_longitude，这种直接赋值的方式不会触发NativeScript的数据绑定更新机制。Observable类需要通过特定方法通知视图属性变化，直接修改属性无法触发变更通知。

修复方案 #

方案1：使用Observable的set方法 #

修改onTap方法，调用this.set()来更新属性，该方法会自动触发视图更新：

import {
  Observable,
  ItemEventData,
} from "@nativescript/core";

export class HomeViewModel extends Observable {
    public _geo_longitude: number;

    constructor() {
        super();
    }

    async onTap(args: ItemEventData): Promise<void> {
        console.log("OnTap Triggered")
        console.log(this._geo_longitude)
        // 调用set方法触发视图更新
        this.set("_geo_longitude", 123213);
    }
}

方案2：使用get/set访问器（更规范） #

将属性改为私有变量，通过get/set访问器封装，并在set方法中调用notifyPropertyChange()触发更新：

import {
  Observable,
  ItemEventData,
} from "@nativescript/core";

export class HomeViewModel extends Observable {
    private _geo_longitude: number;

    constructor() {
        super();
    }

    get geo_longitude(): number {
        return this._geo_longitude;
    }

    set geo_longitude(value: number) {
        if (this._geo_longitude !== value) {
            this._geo_longitude = value;
            this.notifyPropertyChange("geo_longitude", value);
        }
    }

    async onTap(args: ItemEventData): Promise<void> {
        console.log("OnTap Triggered")
        console.log(this.geo_longitude)
        this.geo_longitude = 123213;
    }
}

注意：使用此方案时，需要同步修改home-page.xml中的绑定字段为geo_longitude：

<TextField hint="Enter Something" text="{{ geo_longitude }}"/>
<Label text="{{ geo_longitude }}"/>

相关机制说明 #

NativeScript的Observable类是数据绑定的核心，它通过set()或notifyPropertyChange()方法向视图层发送属性变更通知。当属性变更时，这些方法会触发绑定的视图组件更新自身显示内容。如果使用NativeScript 8及以上版本，还可以使用@Observable装饰器来简化代码，无需手动调用通知方法，装饰器会自动处理变更通知逻辑。

内容的提问来源于stack exchange，提问作者Harrison Kotrolos