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>

我的，

      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"

然后它应该按预期工作。

值为空时，不显示表单

1 个答案: