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

Question

我想使用angular2数据绑定以编程方式更新TextField文本属性.从这里看起来我会在我的布局中设置[(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]})