Nativescript angularjs 2.0 数据绑定答案

【问题标题】：Nativescript angularjs 2.0 data bindingNativescript angularjs 2.0 数据绑定
【发布时间】：2016-06-05 20:28:45
【问题描述】：

使用 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;

        });
    }
}

谢谢！

【问题讨论】：

能否请您添加确切的错误消息？您实际上是在构造函数中设置了this.record = new Record();，还是这只是 SO 问题的简化代码？
我确实在构造函数中设置了this.record，这里是记录类的值：export class Record { id: number;名称：字符串；照片：字符串；但是，我没有收到错误消息。就像我在输入与 ngModel 绑定的文本输入时一样，标签不会吐出值，并且在组件内部，值没有被绑定。

标签： angular nativescript angular2-nativescript

【解决方案1】：

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

例如你的：

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

应该变成：

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

你也可以查看data-binding in NativeScript + Angular-2的教程

【讨论】：

谢谢！至于数据绑定，那是我正在使用的教程，上面的代码无法正常工作。使用 [(ngModel)] 或 (ngModel) 只是在组件中返回 undefined。有什么想法吗？
组件需要兼容ngModel。如果不是，您应该收到一条错误消息。否则，对不起，我不知道 Nativescript。
我也有类似的问题.. @charliepage
这个有什么解决方案吗..教程太混乱了..没有定义简单的实现...我也尝试了教程的绑定方式，即使用一些类对象... [( ngModel)]="record.name"..但是当我尝试通过单击按钮访问它时，它给出了未定义的...有没有正确的方法来获取文本值...为什么没有太多的样本或简单的实现……挣扎了好几天……

【解决方案2】：

转到您的应用程序的主模块，该模块由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 日之前提供的。可以在 this link 中找到

或查看 nativescript.org 教程中的 this 练习

练习：Angular 2 的双向数据绑定

在 app/app.component.ts 中，找到第一个，并替换它下面介绍了一个新的 [(ngModel)] 属性：

复制下一步，打开 app/app.module.ts 并将其内容替换为以下代码，其中将一个新的 NativeScriptFormsModule 添加到 NgModule 的导入列表中。

从“@angular/core”复制导入 { NgModule }；进口 { NativeScriptFormsModule } 来自“nativescript-angular/forms”；进口 { NativeScriptModule } 来自“nativescript-angular/platform”；

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

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

【讨论】：