ngIf与IMG根据从观测量返回角4

<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’没有什么要显示的号码......这用绳子工作，但不与number..I真的不明白为什么...ngIf与IMG根据从观测量返回角4

来源

2017-05-09 Emile Cantero

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

来源

2017-05-09 15:01:47 Maxime

感谢您的帮助马克西姆你得到它但'太阳''云'或'风暴'intend我想用一个数字..你可以做到这一点吗？ –

如果'fooIcon'是一个数字，我的编辑应该没问题;）（或者您可以切换地图的顺序：将字符串作为ID和数字作为值） – Maxime

感谢您的帮助Maxime我会尝试一下tomorow，然后告诉您它是否工作 –

你为什么不只是做到以下几点：

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

来源

2017-05-09 14:36:45

非常感谢帮助，但我更期待这样的事情==>

–

地图你可观察和创建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}); 
});

来源

2017-05-09 14:37:50

非常感谢您的帮助，但不想在我的用户服务 –

投入很多代码行但我认为它应该按照 –

的方式工作，你不需要把这个服务，但在组件处理渲染部分 –

ngIf与IMG根据从观测量返回角4

回答

相关问题