Runtime Error Cannot read property 'username' of undefined in ionic 3 - angularjs

Question

I was using the following code in restful API with ionic 3 for an app am building. It was working properly and then started showing Run time Error Cannot read property 'username' of undefined.
These are the codes I wrote for the app.
this is my 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);
});
});
};
}
and my signup .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);
}
}
this is the signup.html code
<!--
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>
Or Login
</ion-list>
</ion-content>