简介
NativeScript版本4.2.4
Angular版本6.0
这是我关于nativescript的第一个应用程序。我对angular很熟悉,因此我需要选择nativescript而非ionic来构建本机混合应用程序。
场景
我使用同伴创建了此应用。现在,首先,我创建了两个TextField并将它们的文本与某些字符串属性绑定。在这里,我告诉大家,此模板默认情况下使用延迟加载,并且此应用程序中的所有组件都有各自的module.ts文件。
问题
绑定后,当我在智能手机上运行应用程序(实时同步)时。两种方式的数据绑定无效。我在这里共享我的代码。
app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule({
bootstrap: [
AppComponent
],
imports: [
AppRoutingModule,
NativeScriptModule,
NativeScriptFormsModule,
NativeScriptUISideDrawerModule
],
declarations: [
AppComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
home.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
@NgModule({
imports: [
NativeScriptCommonModule,
NativeScriptFormsModule,
HomeRoutingModule
],
declarations: [
HomeComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class HomeModule { }
home.component.ts
import { Component, OnInit } from "@angular/core";
import { RadSideDrawer } from "nativescript-ui-sidedrawer";
import * as app from "tns-core-modules/application";
@Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
TestingText: string;
constructor() {
this.TestingText = 'anything';
// Use the component constructor to inject providers.
}
ngOnInit(): void {
// Init your component properties here.
}
onDrawerButtonTap(): void {
const sideDrawer = <RadSideDrawer>app.getRootView();
sideDrawer.showDrawer();
}
}
home.component.html
<ActionBar class="action-bar">
<!--
Use the NavigationButton as a side-drawer button in Android
because ActionItems are shown on the right side of the ActionBar
-->
<NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"></NavigationButton>
<!--
Use the ActionItem for IOS with position set to left. Using the
NavigationButton as a side-drawer button in iOS is not possible,
because its function is to always navigate back in the application.
-->
<ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()" ios.position="left">
</ActionItem>
<Label class="action-bar-title" text="Home"></Label>
</ActionBar>
<FlexboxLayout class="page">
<StackLayout class="form">
<StackLayout class="input-field">
<TextField hint="Type Something" [(ngModel)]="TestingText" secure="false" class="input input-border"></TextField>
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
<StackLayout class="input-field">
<TextField hint="Binding" Text="{{TestingText}}" secure="false" class="input input-border"></TextField>
<StackLayout class="hr-light"></StackLayout>
</StackLayout>
</StackLayout>
</FlexboxLayout>
此外,我还发现了以下相关问题
Binding doesnt work on textfield
但这在我的情况下不起作用。我认为我的问题是相同的,但技术不同。这个问题基于角度2,但在我的情况下,我使用角度6。
输出
答案 0 :(得分:3)
您需要使用[(ngModel)]
将其绑定到另一个文本字段
<TextField [(ngModel)]="TestingText"></TextField>
或[text]
将其绑定到标签
<Label [text]="TestingText"></Label>
答案 1 :(得分:1)
这是您需要的工作代码的游乐场链接
https://play.nativescript.org/?template=play-ng&id=76g6B9
home.component.html
<TextField [(ngModel)]="textFieldData"></TextField>
<Label [text]="labelData"></Label>
<TextView [(ngModel)]="textViewData"></TextView>
home.component.ts
textViewData: string = "hey this is text view";
labelData: string = "hey this is label";
textFieldData: string = "hey this is text field";