Question

刚开始使用Ionic 2项目的Angular 2。我有一个简单的登录表单：

  <ion-list>
    <ion-item></ion-item>
    <ion-item>
      <ion-label fixed>Email</ion-label>
      <ion-input [(ngModel)]="loginData.Email" type="text" value=""></ion-input>
    </ion-item>
    <ion-item>
      <ion-label fixed>Password</ion-label>
      <ion-input [(ngModel)]="loginData.Password" type="password"></ion-input>
    </ion-item>
  </ion-list>

在后端我有对象

export class LoginPage {
  user: User;
  local: Storage;
  loginData = { Email: null, Password: null};

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

当我输入用户名和密码并尝试使用console.log访问数据时，密码显示为：

Object {Email: "email - removed", Password: "[object Object]"}

尝试类似this.loginData.Password = String(this.loginData.Password);的内容会产生相同的结果。

这也会产生同样的事情console.log(JSON.stringify(this.loginData.Password));

Answer 1

问题是ngModel不接受插值作为参数。

ngModel Documentation

您的代码应如下所示：

<ion-input [(ngModel)]="loginData.Password" type="password"></ion-input>

这似乎工作正常：

<input type="text" [(ngModel)]="loginData.Email" >


<input type="password" [(ngModel)]="loginData.Password" >

<button (click)="login()">login</button>

登录：

loginData = { Email:null, Password: null};

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

Answer 2

我找到了解决方法。我不知道为什么会这样做而另一个没有，但如果我以这种方式存储值

  Email: string;
  Password: string;

而不是在一个物体中它运作良好。

Angular 2 ngModel返回[对象]

2 个答案: