如何在TypeScript/NativeScript的TextChange事件中调用函数

数据老陈

2026-9-30

TextField textChange事件触发修复方案

存在的问题

TextField未做双向绑定，输入值无法同步到ViewModel变量
事件回调参数类型错误，textChange事件传递的是事件对象而非直接传入输入值
模板绑定的变量名_message和代码中修改的message不匹配，页面不会同步更新
console.log使用双引号包裹模板字符串，存在语法错误

修正后代码

1. XML布局代码

如果是NativeScript Core模式：

<StackLayout class="p-20">
    <Label text="{{_message}}" class="h2 text-center" textWrap="true" />
    <TextField text="{{_target}}" hint="Target" textChange="updateTarget" />
</StackLayout>

如果是Angular + NativeScript模式：

<StackLayout class="p-20">
    <Label text="{{_message}}" class="h2 text-center" textWrap="true" />
    <TextField [(ngModel)]="_target" hint="Target" (textChange)="updateTarget($event)" />
</StackLayout>

2. main-view-model.ts代码

import { TextField, EventData } from '@nativescript/core';

// 提前声明对应可观察属性
private _target: string = '';
private _message: string = '';

updateTarget(args: EventData) {
    const textField = args.object as TextField;
    this._target = textField.text;
    console.log(`Updating target: ${this._target}`)
    this._message = `Target: ${this._target}`
}