0

nativescript 2/angular 2 を使用しており、データ バインディングに問題があります。私はangularJS 1.xに精通していますが、これについて読んだドキュメントは機能するはずです。ngModel のさまざまなバリエーションを試しましたが、機能しませんでした。record.name の値は「未定義」です。

レコード クラスには、id フィールドと name フィールドが定義されているだけです。もう 1 つの質問は、コンポーネントへの変更イベントをどのようにトリガーするかということです。ユーザーがテキスト入力を開始している場合、入力中にコンポーネント内の関数を呼び出すにはどうすればよいですか?

以下は私の「html」です：

<StackLayout>   
    <Textfield hint="Search for a Record" [(ngModel)]="record.name" (returnPress)="searchRecord()"></Textfield>
    <Label text="{{ record.name }}"></Label>
    <Button text="Search" class="btn" (tap)="searchRecord()"></Button>

    <Button text="Take Photo" class="btn" (tap)="takePhoto()"></Button>
</StackLayout>

レコード コンポーネントを追加します。

import {Component} from "@angular/core";

import cameraModule = require("camera");
import imageModule = require("ui/image");

import {Record} from "../../shared/record/record";
import {RecordService} from "../../shared/record/record-service";

@Component({
  selector: "add-record",
  templateUrl: "pages/add-record/add-record.html",
  styleUrls: ["pages/add-record/add-record-common.css"],
  providers: [ RecordService ]
})
export class AddRecordPage {    
    record: Record;

    constructor(private _recordService: RecordService) {
        this.record = new Record();
    }

    searchRecord() {
        console.log(this.record.name + '!');


        this._recordService.add(this.record)
            .subscribe(
                () => {
                    alert('a');
                },
                () => {
                    alert('b');
                }
            );
    }

    takePhoto() {
        cameraModule.takePicture().then(picture => {
            console.log("Result is an image source instance");
            var image = new imageModule.Image();
            image.imageSource = picture;

        });
    }
}

ありがとう！

4

2 に答える 2

1

NativeScript + Angular-2に使用される正しいものではない、「html」ファイルのバインディングの構文にいくつかの問題があることに気付きましたここで同様のトピックに関する私の回答を確認してください

たとえば、あなたのもの：

<Label text="{{ record.name }}"></Label>

になるはずです：

<Label [text]="record.name"></Label>

また、NativeScript + Angular-2 でのデータ バインディングに関するチュートリアルも確認できます。

于 2016-06-06T10:34:11.003 に答える
1

によって読み込まれるアプリのメイン モジュールに移動しますplatformNativeScriptDynamic().bootstrapModule()。

[メイン モジュールを見つけるには、main.ts(またはmain.js) ファイル (アプリのエントリ ポイント) に移動します。以下のような行を見つけます。

platformNativeScriptDynamic().bootstrapModule(AppModule);

これAppModuleがロードされる最初のモジュールです。

importステートメントを参照して、AppModuleが定義されているファイルを見つけてください。以下のように見えるかもしれません

import { AppComponent } from "./app.component";

]

メインモジュールのファイル ( app.component.ts) に、次の 2 つを追加します。

1）上部にインポートを追加しますNativeScriptFormsModule

import { NativeScriptFormsModule } from "nativescript-angular/forms";

2) メイン モジュールの@NgModuleデコレータで配列に追加して、これをインポートされたモジュールの 1 つとして追加しますNativeScriptFormsModule。imports:

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

この ngModel のサポートは、1 月 27 日より前に提供されませんでした。このリンクにあるように

または、nativescript.org のチュートリアルからこの演習を参照してください。

演習: Angular 2 を使用した双方向データ バインディング

app/app.component.ts で、最初の を見つけて、新しい [(ngModel)] 属性を導入する以下に置き換えます。

次に、app/app.module.ts を開き、その内容を以下のコードに置き換えます。これにより、新しい NativeScriptFormsModule が NgModule のインポート リストに追加されます。

"@angular/core" から import { NgModule } をコピーします。import { NativeScriptFormsModule } from "nativescript-angular/forms"; import { NativeScriptModule } from "nativescript-angular/platform";

import { AppComponent } from "./app.component";

@NgModule({ インポート: [ NativeScriptModule, NativeScriptFormsModule ], 宣言: [AppComponent], ブートストラップ: [AppComponent] }) export class AppModule {}

于 2016-12-06T17:55:46.707 に答える