ngIf 与 img 取决于从 Observables Angular 4 返回的数字

Question

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

如果我的".acknowledged"返回"1"，我正在尝试显示图像，如果它返回"0"，则不应显示任何内容......它适用于字符串，但不适用于数字。我真的不明白为什么...

Answer 1

你不需要Observable s来做到这一点：

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

编辑：

如果您有代表图片的数字，只需在您的 TS 或服务中绘制地图：

public numberToName = {
  0: 'sun',
  1: 'cloud',
  2: 'storm'
}

然后你可以像这样使用它：

<div *ngFor="let user of userService.users | async">
  <div *ngIf="user.data.hosts.running.foo_icon as fooIcon">
    <img
      *ngIf="numberToName(fooIcon)"
      class="foo-icon"
      [src]="'./app/img/' + numberToName(fooIcon) + '.png'"/>
  </div>
</div> 

Answer 2

你为什么不做以下事情：

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

Answer 3

映射你可观察的，并创建iconId作为你可以在html中测试的数字

userService.users
.map(user= > {
   let icon = user.data.hosts.running.foo_icon;
   let iconId = icon === 'sun' ? 1 : (icon === 'cloud' ? 2 : 3);
   return Object.assign({}, user, {iconId});
 });