NativeScript 8+Angular15中TextField双向绑定丢失最后字符求助

问题重现 #

使用ns create demo创建NativeScript Angular项目后，在模板中通过双向绑定关联TextField与Label：

<TextField [(ngModel)]="demo"></TextField>
<Label [text]="demo"></Label>

组件中声明demo属性，并在AppModule中导入NativeScriptFormsModule，但输入时Label始终比TextField少显示最后一个字符；添加(textChange)监听后，会先触发携带最新值的事件，紧接着触发携带旧值的事件且旧值最终生效。

无Hack解决方案 #

方案1：改用响应式表单（ReactiveForms） #

响应式表单能精准控制值的更新流程，规避模板驱动表单（ngModel）的事件时序问题：

1. 组件中创建FormControl：

import { Component } from "@angular/core";
import { FormControl } from "@angular/forms";

@Component({
  selector: "ItemDetails",
  templateUrl: "./item-details.component.html"
})
export class ItemDetailsComponent {
  demoControl = new FormControl('');
}

2. 修改模板绑定逻辑：

<TextField [formControl]="demoControl"></TextField>
<Label [text]="demoControl.value"></Label>

3. 在AppModule中同时导入表单模块：

import { NativeScriptFormsModule } from "@nativescript/angular";
import { ReactiveFormsModule } from "@angular/forms";

@NgModule({
  imports: [
    // 其他导入项
    NativeScriptFormsModule,
    ReactiveFormsModule
  ]
})
export class AppModule {}

方案2：手动处理文本变更并强制变更检测 #

绕开双向绑定，手动控制值更新与Angular变更检测：

1. 组件中注入ChangeDetectorRef并处理文本变更：

import { Component, ChangeDetectorRef } from "@angular/core";

@Component({
  selector: "ItemDetails",
  templateUrl: "./item-details.component.html"
})
export class ItemDetailsComponent {
  demo = '';

  constructor(private cdr: ChangeDetectorRef) {}

  onTextChange(event: any) {
    this.demo = event.value;
    this.cdr.detectChanges();
  }
}

2. 修改模板为单向绑定+事件监听：

<TextField [text]="demo" (textChange)="onTextChange($event)"></TextField>
<Label [text]="demo"></Label>

方案3：升级NativeScript到最新稳定版 #

部分旧版本的NativeScript Angular存在ngModel绑定的时序bug，执行命令升级依赖后重新测试：

ns update

问题原因 #

在较新的NativeScript Angular版本中，TextField的textChange事件触发时机与Angular变更检测周期存在交互冲突，导致ngModel双向绑定被后续的旧值事件覆盖，最终出现Label显示滞后的问题。响应式表单或手动控制变更检测可规避这一时序问题。

内容的提问来源于stack exchange，提问作者Arco Voltaico