2016-09-15 2 views
1

Двухсторонняя переписка не работает. Я только начал учиться, может быть, мне не хватает какой-то очень простой вещи, спасибо за то, что я смотрю и отвечаю.Weird NativeScript Angular 2 data Binding issue

Детали как под:

package.json 
    { 
    "name": "agaminsstart", 
    "main": "app.js", 
    "version": "1.0.0", 
    "author": "[email protected]", 
    "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 = "[email protected]"; 
     this.user = new User(); 
     this.user.email = "[email protected]"; 
     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> 

ответ

0

Все вроде бы правильно, попробуйте обновить до окончательной версии угловых и/или опубликовать журнал, если он показывает какие-либо ошибки.

Другая вещь, которую вы можете сделать, это изменить имя файла app.ts в main.ts (просто следовать соглашениям angular2) и в вашем package.json удалить строку, которая содержит: "main": "app.js", затем сделать tns install, чтобы увидеть, если он работает.

Надеюсь, это поможет!

0

У меня была та же проблема. Причина: Я забыл сделать импорт в main.ts

добавить NativeScriptFormsModule импортировать, как:

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