我通过ngModel
我有模型类
export class Product {
name: string
description: string
imageUrl: string
}
查看:
<GridLayout backgroundColor="red">
<!--
This part is for logged users
-->
<StackLayout
[id]="container"
[visibility]="isLogged ? 'visible' : 'collapse'">
<Label text="Add product" textWrap="true"></Label>
<TextField
hint="product name"
[(ngModel)]="product.name">
</TextField>
<TextField
hint="product desc"
[(ngModel)]="product.description">
</TextField>
<Button text="Zrób zdjęcie produktu" (tap)="didTapTakePhoto()">
</Button>
<Button text="Wyślij na serwer" (tap)="didTapSendProduct()">
</Button>
<Image #photo></Image>
</StackLayout>
<!--
This part is for not logged users
-->
<StackLayout [visibility]="isLogged ? 'collapse' : 'visible'">
<Label text="Musisz się zalogować!" textWrap="true"></Label>
</StackLayout>
</GridLayout>
和控制器:
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()
}
}
当我在iOS设备上运行我的应用
时constructor()
中实现)当我点按发送按钮时,功能didTapSendProduct()
会打印:
CONSOLE LOG file:///app/tabs/addProduct/addProduct.component.js:51:20: Name
CONSOLE LOG file:///app/tabs/addProduct/addProduct.component.js:52:20: Desc
无论在textfields中设置什么
请注意,我在导入中设置了NativeScriptFormsModule
:
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 { }
答案 0 :(得分:19)
确保您在NativeScriptFormsModule
上声明AddProductComponent
组件的模块上导入AppModule
。
示例:
<强> componentName.module.ts 强>
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { ComponentName } from "./componentName.component";
@NgModule({
imports: [
NativeScriptFormsModule
],
declarations: [
ComponentName
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class ComponentModule { }
答案 1 :(得分:0)
你可以这样做
查看
<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
]
})
它对我有用