_co.userData 是未定义的离子 3

Question

我收到 ngModel 错误。

_co.userData 未定义。

我已经发布了我的 home.ts 和 home.html 文件。 显示错误的浏览器控制台靠近 [(ngModel)].

这是我的 home.ts 文件

import { Component, NgModule } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AuthService} from '../../providers/auth-service/auth-service';
import { CompanygroupsPage } from '../companygroups/companygroups';




@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
responseData:any;
userData:{"username":"hi","password":"123"}

constructor(public navCtrl: NavController, public authService:AuthService){}
login(){
console.log(this.userData);
this.navCtrl.push(CompanygroupsPage);
}


}

这是我的 home.html 文件

<ion-content padding class="home">
<ion-list class="login">
  <form>
    <ion-item class="inputs">
        <ion-label stacked>Username</ion-label>
        <ion-input value="" type="text" [(ngModel)]="userData.username" name="username"></ion-input>
        <ion-icon name="contact" item-left></ion-icon>
      </ion-item>

      <ion-item class="inputs">
        <ion-label stacked>Password</ion-label>
        <ion-input type="password" value="" [(ngModel)]="userData.password" name="password"></ion-input> 
        <ion-icon name="lock" item-left></ion-icon>

      </ion-item>
      <button (click)="login()" class="btn_login"  ion-button color="light" round>Login</button>
    </form>
    </ion-list>  
  <ion-footer class="footer">
      <ion-toolbar>
       ...
      </ion-toolbar>
    </ion-footer>

接近错误

<ion-input value="admin" type="text" [(ngModel)]="username" name="username"></ion-input> 

Answer 1

您需要分配，

改变

来自

userData:{"username":"hi","password":"123"}

到

userData = {"username":"hi","password":"123"}