NativeScript 2/ Angular 2 数据绑定 [(ngModel)] 如何以编程方式更新 TextField。

Question

我想使用 angular2 数据绑定以编程方式更新 TextField 文本属性。从 here 看来我会在我的布局中设置 [(ngModel)]="email" 然后在我的代码中添加一个属性电子邮件。使用当前设置，我可以在加载时更改文本属性，但是如果我尝试通过单击按钮以编程方式更改文本属性，则对电子邮件的更改不会反映在视图的 TextField 中文本属性。

import { Component, OnInit } from '@angular/core';
import { User }              from '../../shared/user/user';
import { LoginModel }        from '../../model/login/login-model';
import { HttpService }       from '../../services/http/http-service';

@Component({
    selector:'login',
    templateUrl:'pages/login/login.component.html',
    providers: [HttpService]
})

export class LoginComponent implements OnInit {
    email:string = "test@live.com";
    user: User;
    //model: LoginModel;
    constructor(private _httpService: Httpservice) {
        //this.model = new LoginModel();
        this.user = new User();
    } //default constructor

    ngOnInit() {}

    onButtonTap() {
        //alert("onButtonTap clicked ");
        //this._mpixService.register(this.model.user);

        this.email = "Changed@live.com";
        alert("onButtonTap clicked " + this.email);
    }
}

我的观点

<ActionBar title="Login Mpix Tap To Print">
  <ActionItem text="Login" android.systemIcon="ic_menu_share_holo_dark" ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<StackLayout>
    <TextField hint="Email Address" keyboardType="email"
        autocorrect="false" autocapitalization="none" [text]="email"></TextField>
    <TextField hint="Password" secure="true" keyboardType="password" 
        autocorrect="false" autocapitalization="none" [(ngModel)]="password"></TextField>

    <Button text="Sign In" (Tap)='onButtonTap()'></Button>
    <Button text="Sign up for Mpix" [nsRouterLink]="['/signup']"></Button>
</StackLayout>

我也尝试过 TextField 视图的变体属性

<TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [text]="email" (emailChange)="email=$event"></TextField>

<TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [(ngModel)]="email" [text]=email></TextField>

<TextField hint="Email Address" keyboardType="email"       autocorrect="false" autocapitalization="none" [(ngModel)]="email">{{email}}</TextField>

首次加载界面时，文本字段设置为 test@live.com。

Answer 1

您可能必须将表单模块从 NativeScript 导入到您的 NgModule 导入数组中：

从"nativescript-angular/forms"导入{NativeScriptFormsModule}；

并在 NgModule 属性中

@NgModule({imports:[NativeScriptFormsModule]})

Answer 2

最近的更新解决了这个问题。在下面的 link 中有更多详细信息，基本上有一个不相关的构建问题在我的代码能够运行之前停止了代码。更新 tns-core-modules 和 nativescript-angular 后，它可以使用上面的代码。

NativeScript 2/ Angular 2 数据绑定 [(ngModel)] 如何以编程方式更新 TextField。

NativeScript 2/ Angular 2 Data binding [(ngModel)] how do I update TextField programmatically.

data-binding

textfield

angular-ngmodel

angular