Question

使用nativescript 2 / angular 2，遇到数据绑定问题。我熟悉angularJS 1.x，但是我已经阅读过的文档，这应该是有用的。尝试了ngModel的不同变体，但没有工作。 record.name的值是＆＃34; undefined＆＃34;。

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

以下是我的＆＃34; html＆＃34;：

lapply

添加记录组件：

<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>

谢谢！

Answer 1

我注意到你的＆＃34; html＆＃34;中的绑定语法存在一些问题。用于NativeScript + Angular-2的文件不正确检查我对类似主题here

的回答

例如你的：

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

应该成为：

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

另外，您可以查看有关data-binding in NativeScript + Angular-2

的教程

Answer 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”复制import {NgModule}; import {   来自“nativescript-angular / forms”的NativeScriptFormsModule}; import {   NativeScriptModule}来自“nativescript-angular / platform”;

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

@NgModule（{进口：[       NativeScriptModule，       NativeScriptFormsModule]，声明：[AppComponent]，bootstrap：[AppComponent]}）导出类AppModule {}

Nativescript angularjs 2.0数据绑定

2 个答案: