Двухстороннее связывание NativeScript Angular 6 не работает в TextField

Question

Введение

Версия NativeScript 4.2.4

Угловая версия 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>

Кроме того, я также нашелниже связанный вопрос

Привязка не работает с текстовым полем

, но в моем случае это не работает.Я думаю, что мой вопрос такой же, но другой по технологии.Этот вопрос основан на угловых 2, но в моем случае я использую угловые 6.

Выход

Answer 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";

Answer 2

Вам нужно будет использовать [(ngModel)], чтобы связать его с другим текстовым полем

<TextField [(ngModel)]="TestingText"></TextField>

или [text], чтобы связать его с меткой

<Label [text]="TestingText"></Label>