运行时错误无法读取离子3中未定义的属性“用户名”

Question

我在使用离子3的restful API中使用以下代码来构建应用程序。它工作正常然后开始显示运行时错误无法读取未定义的属性'用户名'。

这些是我为该应用程序编写的代码。

这是我的auth-service.ts

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import 'rxjs/add/operator/map';

let apiUrl ='http://localhost/PHP-Slim-Restful/api/';
/*
  Generated class for the AuthServiceProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular DI.
*/
@Injectable()
export class AuthServiceProvider {

  constructor(public http: Http) {
    console.log('Hello AuthServiceProvider Provider');
  }

  postData(credentials, type) {
    return new Promise((resolve, reject) => {
      let headers = new Headers();

      this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
        .subscribe(res => {
          resolve(res.text());
        }, (err) => {
          reject(err);
        });
    });

  };
}

和我的注册.ts

import { Component } from '@angular/core';
import { IonicPage, NavController} from 'ionic-angular';
import { LoginPage } from '../login/login';
import { TabsPage } from '../tabs/tabs';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';

/**
 * Generated class for the SignupPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {
  responseData : any;
  UserData={"username":"","password":"","email":"","name":""}

  constructor(public navCtrl: NavController, public authService: AuthServiceProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SignupPage');
  }
  signup(){
    this.authService.postData(this.UserData,'signup').then((result) => {
      this.responseData = result;
      console.log(this.responseData);
      localStorage.setItem('userData', JSON.stringify(this.responseData));
      this.navCtrl.push(TabsPage);
    }, (err) => {
      // Error log
    });

  }
  login(){
    //Api connections
    this.navCtrl.push(LoginPage);
  }
}

这是signup.html代码

<!--
  Generated template for the SignupPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>signup</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>

        <ion-item>
          <ion-label floating>Name</ion-label>
          <ion-input type="text" value="" [(ngModel)]="UserData.name"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Email</ion-label>
            <ion-input type="text"  value="" [(ngModel)]="UserData.email"></ion-input>
          </ion-item>
          <ion-item>
              <ion-label floating>Username</ion-label>
              <ion-input type="text"  value="" [(ngModel)]="UserData.username"></ion-input>
            </ion-item>        

        <ion-item>
          <ion-label floating>Password</ion-label>
          <ion-input type="password"  [(ngModel)]="UserData.password"></ion-input>
        </ion-item>
        <button ion-button block class="margin-top" (click)="signup()">Signup</button>
     <a href="#" (click)="login()">Or Login</a>
      </ion-list>
</ion-content>