以角度 4 显示取决于 Observables 的图像

Question

我在 Angular 4 项目中使用 Observables（Rxjs 库）从带有 http get 的 api 获取数据，我想根据从 API 收到的数据显示徽标（png）

例如，当我的对象 [{{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>