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”是returning“1”，我正在尝试显示图像，如果它是return“0”，则不应显示任何图像...它适用于字符串但不是数字..我真的不明白为什么...

Answer 1

你为什么不做以下事情：

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

映射您的 Observable 并创建 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});
 });

Answer 3

你不需要 Observables 来做到这一点:

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

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

ngIf with img depending for number returning from Observables Angular 4

rxjs

typescript

angular-ng-if

ngfor

angular