How to Using Json(Mongo DB) data in AngularJS 2 expression - mongodb

Question

I'm develop in ng2 rc4 and my User data stored Mongo DB. User's can edit their data in my page, but my editing page hav got a problem. My source looks like this:
import { User } from './user.service.ts';
#component(
selector: 'edit-user',
template: `
Email : <input type="text" [(ngModel)]="userInfo.email"><br />
Name : <input type="text" [(ngModel)]="userInfo.name"><br />
Address : <input type="text" [(ngModel)]="userInfo.address"><br />
Tel :
<input type="text" [(ngModel)]="userInfo.tel.tel1">-
<input type="text" [(ngModel)]="userInfo.tel.tel2">-
<input type="text" [(ngModel)]="userInfo.tel.tel3"><br />
<button>Submit</button>
`,
providers: [ User ]
)
export class EditUser {
private userInfo: any = {
'email': '',
'name': '',
'address': '',
'tel': {
'tel1': '',
'tel2': '',
'tel3': ''
}
};
constructor(private user: User) {
}
ngOnInit() {
this.getUser();
}
getUser() {
this.user.getUser( ... )
.then(res => {
...
// case 1
// res = {'email': 'a#a.a', 'name': 'NameA', 'address': 'aaa', 'tel': {'tel1': '1', 'tel2': '2', 'tel3': '3'}};
// case 2
// res = {'email': 'b#b.b', 'name': 'NameB'};
this.userInfo = res;
...
})
.catch( ... )
}
}
Everything is okay when in case 1 but in case 2 there is no tel object and input tag throws error because of the missing tel object in res. The user was not entering tel information in the case 2. So it is a 2 way binding error: undefined tel property of userInfo. don't expression, don't enter the tel.tel1 property.
I can't change mongoDB and json hierarchy. How can I resolve this?

Answer 1

Assign empty object to tel if empty
res.tel = res.tel || {};
this.userInfo = res;