奇妙なNativeScript角度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

は、それはすべてのエラーを示した場合、角度および/またはログをポストの最終バージョンにアップグレードしてみてください。 "main": "app.js"を、それが動作するかどうかを確認するためにtns installの操作を行います。

あなたがすることができるもう一つは、含まれている行を削除main.tsにファイルapp.tsの名前を変更する（ちょうどangular2の規則に従うこと）し、あなたのpackage.jsonです。

希望すると助かります！

Answer 2

私は同じ問題がありました。理由：

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

：私は

のように、インポートするNativeScriptFormsModuleを追加main.tsでインポートを行うことを忘れてしまいました