奇怪的 NativeScript Angular 2 数据绑定问题

Question

双向绑定无效。刚开始学习，可能是漏掉了一些很基础的东西，谢谢大家的关注和回复。

详情如下：

package.json
    {
  "name": "agaminsstart",
  "main": "app.js",
  "version": "1.0.0",
  "author": "babul.prasad@xyz.com",
  "description": "Nativescript Angular Base Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "org.nativescript.MyApp",
    "tns-ios": {
      "version": "2.2.1"
    },
    "tns-android": {
      "version": "2.2.0"
    }
  },
  "dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/platform-server": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "nativescript-angular": "0.5.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.11",
    "tns-core-modules": "^2.2.1",
    "zone.js": "0.6.17"
  },
  "devDependencies": {
    "babel-traverse": "6.15.0",
    "babel-types": "6.15.0",
    "babylon": "6.9.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "^0.3.2",
    "typescript": "^1.8.10"
  }
}

app.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app.module";


platformNativeScriptDynamic().bootstrapModule(AppModule);

app.module.ts

import { NativeScriptModule } from "nativescript-angular/platform";
import { NgModule } from "@angular/core";
import { AppComponent } from "./components/login/app.component"

@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule],
    exports: []
})
export class AppModule { }

app.component.ts

import {Component} from "@angular/core";
import {User} from "./user";

@Component({
    selector: "my-app",
    templateUrl: "./components/login/app.component.html",
    styleUrls: [ "components/login/login.css"]
})
export class AppComponent {
    public user : User;

    constructor(){
        //this.email = "babul.prasad@xyz.com";
        this.user = new User();
        this.user.email = "ngconf@telerik33.com";
        this.user.password = "password";
    }
    submit() {
        alert("You are using "+this.user.email+" : "+this.user.password);
    }
}

user.ts

export class User {
  email: string;
  password: string;
 }

app.component.html

  <StackLayout>
     <Image src="~/images/pig1.png" stretch="none" horizontalAlignment="center"></Image>
      <TextField #email hint="Email Address" keyboardType="email"  [(ngModel)]="user.email" text="{{user.email}}" autocorrect="false" autocapitalizationType="none"></TextField>
      <TextField #password hint="Password" secure="true" [(ngModel)]="user.password" text="{{user.password}}"></TextField>
      <Button text="Sign in" class="submit-button" (tap)="submit()"></Button>
      <Button text="Sign up" class="submit-button"></Button>
  </StackLayout>

Answer 1

一切似乎都是正确的，请尝试升级到 angular 的最终版本 and/or post 如果日志显示任何错误。

您可以做的另一件事是将文件 app.ts 的名称更改为 main.ts（只是为了遵循 angular2 约定）并在您的 package.json 中删除包含以下内容的行："main": "app.js"，然后执行 tns install 以查看它是否有效。

希望对您有所帮助！

Answer 2

我遇到了同样的问题。原因：我忘记在 main.ts

中导入

添加 NativeScriptFormsModule 导入，如：

[...]
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [NativeScriptModule,
    NativeScriptFormsModule],
})
class AppComponentModule {}
[...]

奇怪的 NativeScript Angular 2 数据绑定问题

Weird NativeScript Angular 2 data Binding issue

angular2-nativescript