来自班级

时间:2017-04-23 09:32:59

标签: angular nativescript typescript2.0 angular2-nativescript

如何在Nativescript中实现双向绑定?

以下是我的尝试。变量CompModel包含值" FA I Test"。

我希望能够以类别FA I Test"中设置的方式绑定数据。然后在点击按钮时,用户在文本框中更改的值将显示的值。

    import { Component } from "@angular/core";
import { DependencyObservable } from "ui/core/dependency-observable";
import { Observable } from "data/observable";


@Component({
  selector: "my-app",
  template: `
    <ActionBar title="My App 2"></ActionBar>
    <!-- Your UI components go here -->
    <StackLayout>
    <TextView [(ngModel)]='CompModel.Name'></TextView>
    <Button text="Click" (tap)="Clicked()"></Button>
    </StackLayout>
  `
})
export class AppComponent {
  // Your TypeScript logic goes here
  public CompModel: Plain;

  constructor(){
    this.CompModel = new Plain();
    this.CompModel.Name= "FA I TEST";
  }
  Clicked(obj){
    alert(this.CompModel.Name);
  }
}

export class Plain {
  public Name : String;
  constructor(){
  }
}

1 个答案:

答案 0 :(得分:1)

确保您已注册NativeScriptFormsModule

import { NativeScriptFormsModule } from "nativescript-angular/forms"

@NgModule({
    ...
    imports: [
        NativeScriptModule,
        AppRoutingModule,
        NativeScriptFormsModule // <-- this will enable 2-way binding
    ],
    ...
})