數據不追加到模板中angular2

我試圖將數據追加到我的模板，數據不追加到模板中angular2

@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>

我的數據f ROM後端，

我的錯誤是

TypeError: Cannot read property 'firstname' of undefined

我一直在嘗試了很多，但沒有結果，可有人請給我解釋一下這個問題

來源

2016-08-22 MMR

角度嘗試之前，你的窗體綁定來自_http.get的回覆到達。

使用

<form *ngIf="details" [formGroup]

延遲形式的渲染，直到到達的數據。

通常情況下，安全導航操作details?.firstname還是比較方便的，但目前不能用於雙向綁定

這是不支持

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

改變它

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

會使它工作，但我認爲在你的情況下，第一個建議更合適。

來源

2016-08-22 13:42:32

Gunter，這是什麼意思.subscribe（details => this.details = details） – MMR

這意味着每次通過可觀察的detail details = this.details = details'時，都會執行一個賦值接收值（作爲'details'傳遞給'this.details'）。 –

謝謝你甘特 – MMR

數據不追加到模板中angular2

回答

相關問題