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

问题描述：

我想使用angular2数据绑定以编程方式更新TextField文本属性。从here看来我会在我的布局中设置[（ngModel）] =“email”，然后在我的代码中添加属性电子邮件。使用当前设置，我可以在加载时更改文本属性，但是如果我尝试以编程方式从按钮更改文本属性，则单击电子邮件更改时不会反映在视图的TextField文本属性中。NativeScript 2/Angular 2数据绑定[（ngModel）]如何以编程方式更新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 = "[email protected]"; 
    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 = "[email protected]"; 
     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 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>

文本字段设置为当界面首次加载[email protected]。

[（ngModel）] = “电子邮件” 文本= {{电子邮件}}>也不会与该工作。 – dsum27

答

此问题已固定有最近的更新。在下面的链接中有更多的细节，基本上有一个无关的构建问题，在我的代码能够运行之前停止代码。在更新tns-core-modules和nativescript-angular之后，它与上面的代码一起工作。

Nativescript 2.2 exception

答

可能必须进口NativeScript形式模块插入NgModule进口阵列：

进口{NativeScriptFormsModule}从“nativescript棱角/形式”;

和NgModule属性

@NgModule（{进口：[NativeScriptFormsModule]}）

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

相关推荐