代码之家 › 专栏 › 技术社区 › IamVariable

如何从HTML文件到TypeScript文件获取TextField值?

angular2-nativescript html

1

IamVariable · 技术社区 · 8 年前

我不熟悉nativescript。我想在手机中存储用户数据。为此,我使用了Couchbase数据库。现在,我的要求是在单击保存按钮时获取TextField值`

<TextField hint=" firstName " [text]="_fname ">

</TextField>
<TextField hint="lastname " [text]="_lname ">

</TextField>

<button (tap)="save()" class="btn btn-primary active" text="Save"></button>

`

在上面,我需要在单击按钮时获得两个文本字段值。请解释如何从textfield访问当前值。提前谢谢。

1 回复 | 直到 8 年前

1

4

prolink007 8 年前

解决这一问题的最佳方法是通过双向数据绑定。您需要做的第一件事是添加 NativeScriptFormsModule 到 NgModule 进口清单如下。

应用程序。单元ts

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

import { AppComponent } from "./app.component";

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

然后你需要更新你的组件 .html 要使用双向数据绑定的文件。这会将指定的元素绑定到组件上的属性。ts文件。

<TextField hint=" firstName " [(ngModel)]="_fname "> </TextField>
<TextField hint="lastname " [(ngModel)]="_lname "> </TextField>

<button (tap)="save()" class="btn btn-primary active" text="Save"></button>

最后,确保 _fname 和 _lname 表单中的属性 .ts 文件

export class SomeComponent {
    _fname = "";
    _lname = "";

    save() {
        console.log(this._fname);
        console.log(this._lname);
        // Send values to your DB
    }
}