如何从双向数据绑定对象获取数据

时间:2017-08-02 18:13:14

标签: angular typescript data-binding ionic2

问题

当我将数据放入输入字段时,点击功能会记录

{
  Name:"",
  Pass:""
}

我想获取对象数据。

代码

我有一个带有两个输入和一个登录按钮的登录屏幕。我想以两种方式将对象user: User数据绑定到输入,然后单击可以访问user对象属性NamePass

这是html页面

<ion-content padding class="ion-content">

  <ion-list>

    <ion-item>
      <ion-input type="text" [(value)]="user.Name" placeholder="username"></ion-input>
    </ion-item>

    <ion-item>
      <ion-input type="password" [(value)]="user.Pass" placeholder="password"></ion-input>
    </ion-item>

  </ion-list>

  <div padding>
    <button ion-button color="primary" block (click)="login($event);">Sign In</button>
  </div>

</ion-content>

这是我对应的.ts文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

export class User{
    public Name: String;
    public Pass: String;
    constructor(){
        this.Name = "";
        this.Pass = "";
    }
}

@Component({
  selector: 'login-page',
  templateUrl: 'login.html'
})
export class LoginPage {

  user: User;

  constructor(public navCtrl: NavController) {
      this.user = new User();
  }

  login(){
      console.log(this.user);
  }

}

1 个答案:

答案 0 :(得分:3)

我认为,如果您使用[(ngModel)]代替[(value)],它将完全按照您的意愿使用。