0

使用 nativescript 2/angular 2，数据绑定有问题。我熟悉 angularJS 1.x，但我读过的文档应该可以工作。尝试了 ngModel 的不同变体，但不起作用。record.name 的值为“未定义”。

记录类只定义了一个 id 和 name 字段。我的另一个问题是如何触发组件的更改事件？如果用户开始输入文本输入，我如何在他们输入时调用组件中的函数？

下面是我的“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

转到应用程序的主模块，该模块由platformNativeScriptDynamic().bootstrapModule().

[要找出您的主模块，请转到您main.ts（或main.js）文件（这是应用程序的入口点）。找到如下行：

platformNativeScriptDynamic().bootstrapModule(AppModule);

这AppModule是要加载的第一个模块。

请参阅import语句以查找在哪个文件AppModule中定义。它可能如下所示

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

]

在主模块的文件 ( app.component.ts) 中添加两件事，

1）在顶部添加导入NativeScriptFormsModule

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

2）在主模块的@NgModule装饰器中添加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 并用下面的代码替换它的内容，这会在 NgModule 的导入列表中添加一个新的 NativeScriptFormsModule。

复制 import { NgModule } from "@angular/core"; 从“nativescript-angular/forms”导入 { NativeScriptFormsModule }；从“nativescript-angular/platform”导入 { NativeScriptModule }；

从“./app.component”导入{ AppComponent }；

@NgModule({ 导入：[ NativeScriptModule, NativeScriptFormsModule ]，声明：[AppComponent]，引导程序：[AppComponent] }) 导出类 AppModule {}

于 2016-12-06T17:55:46.707 回答
1

我注意到您在“html”文件中绑定的语法存在一些问题，这不是用于 NativeScript + Angular-2 的正确语法 在此处查看我对类似主题的回答

例如你的：

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

应该变成：

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

您还可以查看有关NativeScript + Angular-2 中数据绑定的教程

于 2016-06-06T10:34:11.003 回答