1

I am trying to append data to my templates,

  @Injectable()
  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/' + this.id;

  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,

this._profileservice.getList()
 .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>
    </div>
    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform"
        novalidate="novalidate">


        <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>
            </div>
        </div>

    </form>

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

MMR
  • 2,869
  • 13
  • 56
  • 110

1 Answers1

2

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

Use

<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

[(ngModel)]="details?.firstname"

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.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Gunter,what does this mean .subscribe(details => this.details = details) – MMR Aug 22 '16 at 13:49
  • This means that every time an even arrives through the observable `details => this.details = details` is executed which assigns the received value (passed as `details`) to `this.details`. – Günter Zöchbauer Aug 22 '16 at 13:51
  • http://stackoverflow.com/questions/39078575/how-to-subscribe-to-data-in-get-call-in-angular2?noredirect=1#comment65506640_39078575 – MMR Aug 22 '16 at 13:53