javascript - Angular 2 ngModel 返回 [object]

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 文档

您的代码应如下所示：

<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;

而不是在一个对象中它工作得很好。