Ios NativeScript文本字段[（ngModel）]不工作

通过

ngModel

我有模型课

export class Product {
    name: string
    description: string
    imageUrl: string
}

视图：

---

确保在声明

AddProductComponent

组件的模块上导入

NativeScriptFormsModule

，而不仅仅是在

AppModule

中导入组件

例如：

组件名称.module.ts

import { NativeScriptCommonModule, NativeScriptFormsModule } from "nativescript-angular";
import { ComponentName } from "./componentName.component";

@NgModule({
  imports: [
    NativeScriptFormsModule
  ],
  declarations: [
    ComponentName
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class ComponentModule { }

你可以这样做

看法

---

它对我有用

除了AppModule，你还有其他模块吗？如果您的组件属于另一个模块，请确保在该模块中导入NativeScriptFormsModule！不客气。你不是第一个问这个问题的人！我花了几个小时来找出双向数据绑定不起作用的原因！您能推荐一个好的来源来阅读

模块

和

组件

概念吗？博客还是书？你可以从官方网站和nativescript ng教程中阅读有关angular fundamentals的内容。我已经调整了这个答案，添加了一个示例并修复了一个语法错误。

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core"
import * as Firebase from "nativescript-plugin-firebase"
import * as camera from "nativescript-camera";
import { Image } from "ui/image";
import { ImageAsset } from "image-asset"
import { ImageSource } from "image-source"
import { Product } from "../../shared"

@Component({
    selector: "AddProductComponent",
    templateUrl: "tabs/addProduct/addProduct.html"
})
export class AddProductComponent implements OnInit, OnDestroy {

    @ViewChild("photo") photoRef: ElementRef
    filePath: string
    isLogged: boolean = true

    product: Product

    listener = {
        onAuthStateChanged: function(data) {
            this.isLogged = data.loggedIn
        },
        thisArg: this
    }

    constructor() {
        this.product = new Product()
        this.product.name = "Name"
        this.product.description = "Desc"
    }

    ngOnInit(): void {
        Firebase.addAuthStateListener(this.listener)
        camera.requestPermissions()
    }

    ngOnDestroy(): void {
        Firebase.removeAuthStateListener(this.listener)
    }

    didTapTakePhoto() {
        // init the file-system module
        var fs = require("file-system");
        // grab a reference to the app folder
        var appPath = fs.knownFolders.currentApp().path;
        // determine the path to a file in the app/res folder
        this.filePath = appPath + "/cached_product_photo.png";

        camera.takePicture()
            .then((imageAsset) => {
                let photo = <Image>this.photoRef.nativeElement
                photo.src = imageAsset
                let photoSrc = new ImageSource()
                photoSrc.fromAsset(imageAsset).then(image => {
                    console.log("Result: " + image)
                    image.saveToFile(this.filePath, "png")
                })
            })
            .catch((err) => {
                console.log("Error -> " + err.message)
            });
    }

    didTapSendProduct() {
        console.log(this.product.name)
        console.log(this.product.description)
    }

    focusDescription() {
        console.log(this.product.name)
    }

    //TODO: move to separate file/import some more professional uuid generator?/
    // find any other way to distinguish betweeen photos
    getUUID() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1)
        }
        return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4()
            + s4() + s4()
    }
}

import { NgModule, NgModuleFactoryLoader } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NSModuleFactoryLoader } from "nativescript-angular/router";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptFormsModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
    ]
})
export class AppModule { }

import { NativeScriptCommonModule, NativeScriptFormsModule } from "nativescript-angular";
import { ComponentName } from "./componentName.component";

@NgModule({
  imports: [
    NativeScriptFormsModule
  ],
  declarations: [
    ComponentName
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class ComponentModule { }

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

import { NativeScriptCommonModule, NativeScriptFormsModule } from '@nativescript/angular';
import { YourComponent } from "../foo"
@NgModule({
  imports: [
    NativeScriptCommonModule,
    NativeScriptFormsModule
 ],
  exports: [],
  declarations: [
     YourComponent
  ],
  providers: [],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})