данных не добавляя к шаблону в angular2

Question

Я пытаюсь добавить данные в мои шаблоны,

@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]; 
     }); 
} 

}

Я подписываюсь на него следующим образом,

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

Мой шаблон ,

<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 d ата из внутреннего интерфейса,

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

Моя ошибка

TypeError: Cannot read property 'firstname' of undefined 

Я пытался много, но не результат, может кто-нибудь, пожалуйста, объясните мне проблему

Answer 1

Угловое пытается связать свою форму перед тем приходит ответ от _http.get.

Использование

<form *ngIf="details" [formGroup] 

отложить рендеринг формы, пока данные не прибыли.

Обычно безопасной навигации оператор details?.firstname вполне удобно, но не может в настоящее время используется для двусторонней привязки

Это не поддерживается

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

Изменение его

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

заставило бы его работать, но я думаю, что в вашем случае первое предложение лучше подходит.