当值为空时，表单不显示

Question

当我的详细信息为空时，我的模板未显示，但当详细信息具有值时显示该模板。我已在此处构造并且无法找到解决方案。可以请某人帮忙我.......... 我的HTML，

<div class = "nopadding col-sm-12"> 
<form class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)" name="template-contactform"> 
<div class="col-sm-12 nopadding socialaddress"> 
    <div class="col-sm-12 formpaddingcss"> 
     <h3 class = "headingfontcss">SOCIAL ADDRESS</h3> 
    </div> 
     <div class="col-sm-12 formpaddingcss cardbackgroundcolor"> 
      <div class="col-sm-7 cardtopbottompadding noleftpadding"> 
       <div class="col-sm-12 nopadding"> 
        <label for="template-contactform-name" class="col-sm-5 nopadding">FACEBOOK <small>*</small></label> 
        <div class="col-sm-7 nopadding text-right"> 
         <span class="cardtextcolor" tooltip="Log in to your facebook account and click on your profile, copy and paste url from there" [tooltipDisabled]="false" [tooltipAnimation]="true" 
        tooltipPlacement="top"><i class="icon-question-sign"></i> What is my address?</span> 
        </div> 
       </div> 
       <div class="input-group divcenter"> 
        <span class="input-group-addon noradius inputgroupaddon"><i class="icon-facebook"></i></span> 
        <input type="email" tooltip="Enter Facebook url" [tooltipDisabled]="false" [(ngModel)]="details.facebook" class="form-control required email formcontrolheight" placeholder="Facebook" aria-required="true"> 
       </div> 
      </div> 
     </form> 

我的TS，

 export class Social { 
     message: any; 
     http: Http; 
     details: IDetails[]; 
     form: FormGroup; 

    constructor(fbld: FormBuilder, http: Http, private _service: GetAllList,public toastr: ToastsManager) { 
    this.http = http; 
     this._service.getList() 
     .subscribe(details => this.details = details); 
     } 

HTTP调用TS，

getList(): Observable<IDetails[]> { 
    // console.log(this.id); 
    return this._http.get(this._productUrl) 
     .map((response: Response) => { 
      if(response.json().error_code ==0){ 
      return <IDetails[]>response.json().data[0];} 

     }); 

} 

}

Answer 1

我认为Angular2抛出一个异常，因为

[(ngModel)]="details.facebook" 

.facebook无法访问时details是null

如果更改

[(ngModel)]="details.facebook" 

到

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

或

<input type="email" *ngIf="details" 

则预期它应该工作。