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

Question

问题

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

{
  Name:"",
  Pass:""
}

我想获取对象数据。

代码

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

这是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);
  }

}

Answer 1

我认为，如果您使用 [(ngModel)] 而不是 [(value)]，它将完全按照您的意愿工作。