根据 angular 4 中的 Observables 显示图像

Question

我在 Angular 4 项目上使用 Observables（Rxjs 库）通过 http get 从 api 获取数据，我想根据从API

例如，当我的对象 [{{foo_icon}}] 收到 0 我显示风暴，当它收到 1 我显示云，当它 2 我想显示一个太阳

这是我几周以来一直在尝试的代码：

<p*ngFor="let user of userService.users | async"{{user.data.hosts.running.foo_icon}}</p> 

 <div *ngIf="cloud; then sun; else storm"></div>
<ng-template #sun><img class="foo-icon" src="./app/img/sun.png"/></ng-template>
<ng-template #cloud><img class="foo-icon" src="./app/img/cloud.png"/></ng-template>
<ng-template #storm><img class="foo-icon" src="./app/img/storm.png"/></ng-template>           
</div>

（userService 从可观察用户接收日期）

提前致谢

Answer 1

您可以直接在图像上使用 ngIf。

<div *ngFor="let user of userService.users | async">
  <div *ngIf="user?.data.hosts.running.foo_icon as fooIcon">
     <img *ngIf="fooIcon === 'sun'" class="foo-icon" src="./app/img/sun.png"/>
     <img *ngIf="fooIcon === 'cloud'" class="foo-icon" src="./app/img/cloud.png"/>
     <img *ngIf="fooIcon === 'storm'" class="foo-icon" src="./app/img/storm.png"/>
  </div>
</div>

或者你可以在 src attr 中插入图标的 ref

<div *ngFor="let user of userService.users | async">
  <img *ngIf="user?.data.hosts.running.foo_icon as fooIcon" [src]="'./app/' + fooIcon + '.png'"/>
</div>

根据 angular 4 中的 Observables 显示图像

Showing images depending on Observables in angular 4

json

observable

rxjs

angular2-observables

angular