Angular 2 ngModel 返回 [object]答案

【问题标题】：Angular 2 ngModel returning [object]Angular 2 ngModel 返回 [object]
【发布时间】：2016-11-19 20:45:59
【问题描述】：

刚开始在 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));

【问题讨论】：

试试 console.log('logindata',this.loginData.Email,this.loginData.Password);
这样做给了我[object Object]
它正在返回一个数组。不知道为什么 console.log('logindata',this.loginData.Password[0])
<ion-input [(ngModel)]="loginData.Password" type="password"></ion-input>
@JS_astronauts 我把它换回来了，实际上就是这样。我在多次更改后复制并粘贴它以使其正常工作。

标签： javascript data-binding angular ionic2 angular2-ngmodel

【解决方案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);
}

【讨论】：

除非有什么我看不到的东西就是我的样子。
那是因为您编辑了您的问题，记得吗？还是不行吗？
我刚刚开始工作，无论出于何种原因，当我将值分开而不是放在一个对象中时，它突然开始工作了。
您的示例有常规输入，但由于这是一个 Ionic 2 应用程序，我有离子输入。我认为这可能与它有关。

【解决方案2】：

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

  Email: string;
  Password: string;

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

【讨论】：

In this plunker 你可以看到你的原始代码工作正常（即使使用loginData 对象。
我不知道该说什么，我直接从我的应用程序中复制了该代码。无论如何，它应该可以工作。我已经完成了很多 Angular 1 应用程序，这已经足够接近了，我知道它应该可以工作。我不知道为什么它一直给我这个结果。