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

回答

相關問題