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

Question

我想使用 angular2 数据绑定(bind)以编程方式更新 TextField 文本属性。来自 here看起来我会在我的布局中设置 [(ngModel)]="email"然后在我的代码中添加属性电子邮件。使用当前设置，我可以在加载时更改文本属性，但如果我尝试通过单击按钮以编程方式更改文本属性，则对电子邮件的更改不会反射(reflect)在 View 的 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 View 属性的变体

<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]})