使用nativescript 2 / angular 2,遇到数据绑定问题。我熟悉angularJS 1.x,但是我已经阅读过的文档,这应该是有用的。尝试了ngModel的不同变体,但没有工作。 record.name的值是" undefined"。
记录类只是定义了一个id和name字段。我的另一个问题是如何触发组件的更改事件?如果用户开始输入文本输入,如何在键入时调用组件中的函数?
以下是我的" html":
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>
谢谢!
答案 0 :(得分:1)
我注意到你的&#34; html&#34;中的绑定语法存在一些问题。用于NativeScript + Angular-2的文件不正确 检查我对类似主题here
的回答例如你的:
<Label text="{{ record.name }}"></Label>
应该成为:
<Label [text]="record.name"></Label>
另外,您可以查看有关data-binding in NativeScript + Angular-2
的教程答案 1 :(得分: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日之前发布。可以在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 {}