nlr_p nlr_p - 1 year ago 73
TypeScript Question

Data is not appending to template in angular2

I am trying to append data to my templates,

export class GetAllList {
str = localStorage.getItem('social');
loc = JSON.parse(this.str);
id = this.loc.profile_id;
private _productUrl = 'http://localhost/a2server/index.php/profile/editProfile/' +;

constructor(private _http: Http) { }
getList(): Observable<IDetails[]> {
return this._http.get(this._productUrl)
.map((response: Response) => {
return <IDetails[]>response.json().data[0];


I am subscribing to it as follows,

.subscribe(details => this.details = details);console.log(this.details);

My Template,

<div class="nopadding col-sm-12">

<div class="col-sm-12 nopadding profile">
<div class="col-sm-12 formpaddingcss">
<h3 class="headingfontcss">MY PROFILE</h3>
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform"

<div class="form-process"></div>
<div class="col_half">
<label for="template-contactform-name">First Name <small>*</small></label>
<div class="input-group divcenter">
<span class="input-group-addon noradius"><i class="icon-user iconcolorcss"></i></span>
<input type="email" tooltip="Enter Firstname" [tooltipDisabled]="false" [tooltipAnimation]="true"
tooltipPlacement="top" name="widget-subscribe-form-email" class="form-control required email formcontrolheight"
[formControl]="form.controls['firstname']" [(ngModel)]="details.firstname" placeholder="First Name" required>


My data from backend,

[{profile_id: "1", firstname: "Sachin", lastname: "Tendulkar", profilename: "sachin tendulkar",…}]

My error is

TypeError: Cannot read property 'firstname' of undefined

I have been trying a lot but no result,can some one please explain me the problem

Answer Source

Angular tries to bind your form before the response from _http.get arrives.


<form *ngIf="details" [formGroup]

to delay rendering of the form until the data arrived.

Usually the safe-navigation operator details?.firstname is quite convenient but can't currently be used for two-way-binding

This is not supported


Changing it to

[ngModel]="details?.firstname" (ngModelChange)="details.firstname = $event"

would make it work but I think in your case the first suggestion is a better fit.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download