Anzeigen von Bildern abhängig von Observables in Winkel 4

Question

Ich bekomme Daten von einem API mit http get mit Observables (Rxjs-Bibliothek) auf Angular 4 Projekt und ich würde gerne Logo (PNG) abhängig von den Daten von der API

erhalten

zum Beispiel, wenn mein Objekt [{{foo_icon}}]0 erhielt ich zeigen einen Sturm, wenn es 1 empfangen zeige ich eine Wolke und wenn es 2 ist möchte ich eine Sonne zeigen

Hier ist mein Code ist mit dem, was ich seit Wochen bin versucht, jetzt:

<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 Empfangsdatum von beobachtbaren Benutzer)

Vielen Dank im Voraus

Answer 1

Sie ngIf direkt auf die Bilder verwenden können.

<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> 

Oder können Sie die ref des Symbols in src attr

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