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

【问题标题】：ngIf with img depending for number returning from Observables Angular 4ngIf 与 img 取决于从 Observables Angular 4 返回的数字
【发布时间】：2017-05-09 14:29:42
【问题描述】：

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

【问题讨论】：

标签： angular typescript rxjs ngfor angular-ng-if

【解决方案1】：

您不需要 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>

【讨论】：

感谢您的帮助 Maxime 您知道了，但不是“太阳”、“云”或“风暴”，我想使用一个数字..你怎么能这样做？
如果fooIcon是一个数字，我的编辑应该没问题；）（或者您可以切换地图的顺序：将字符串作为ID，将数字作为值）
感谢马克西姆的帮助，我明天试试，然后告诉你它是否有效
您的代码按我预期的那样工作，但问题是如果我的 Json 密钥返回 0，我应该什么都不显示，如果它返回 1，我只需要显示一些东西......我的示例代码不是那么明确...在下查看我的更新
我创建了一个新帖子，因为下面的评论与我的新请求不匹配，链接在那里：stackoverflow.com/questions/43887546/…

【解决方案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>

【讨论】：

非常感谢您的帮助，但我更期待这样的东西 ==>

【解决方案3】：

映射你的 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});
 });

【讨论】：

非常感谢您的帮助，但不想在我的 userService 中添加太多代码行
你不需要把它放在服务中，但在处理渲染部分的组件中