Question

我想检查json值是否为null。如果info.pic为null，我希望能够显示表单以上传图像，否则显示在json中返回的图像。

我的HTML

<div class="col-sm-9" *ngFor="let info of dInfo">
  <img [src]="'data:image/JPG;base64,' + info.pic"/>
</div>
      <h1>name: </h1>
      <p> {{ info.name }} </p>
    </div>

 // The upload form that I want to hide 
  <label for="image">Upload</label>
  <input #fileInput type="file" id="image"/>
  <button class="btn" (click)="upload()">Upload Image</button>

服务

byID(id: any): Observable<any>
 {
  return this.http.get('')
    .map(
      (response: Response) => {
        return response.json().info;
      }
    );
}

组件

getById(ID: any) {
  this.infoService.byID(ID)
    .subscribe(
      (dInfo2: DInterface[]) => {
        this.dInfo2 = dInfo2
      },
      (error: Response) => console.log(error)
    );
}

界面

export interface DInterface {

   id: number;
   name: string;
   pic: any;

}

JSON回复

http://imgur.com/a/u6KZu

Answer 1

使用*ngIf。

在你的情况下：

<img *ngIf="(info.pic | json) != '{}'" [src]="'data:image/JPG;base64,' + info.pic"/>

Documentation for ngIf

更新1：

尝试：

<img *ngIf="info?.pic" [src]="'data:image/JPG;base64,' + info.pic"/>

如何检查返回的json值是否为null？

1 个答案: