NgIf結合imgは正の負または等しい値に依存します。角度

Question

私はそれをあなたに説明します。私はJsonを私の視点に見るObservableマッピングを持っています。それをngForと解析して、うまくいきます。その値に応じてimg（矢印）を表示する：値が0の場合は安定した矢印を表示し、値が負の場合は下向きの矢印を表示し、正の場合は上向きの矢印を表示する）私が怒ってみたものを見てください：

質問はどのように私は正、負または等しい値に応じてimgを表示することができますか？

<p class="numbersred" *ngFor="let user of userService.users | async"> {{user.data.apps.availability.trend}}%</p> 
      <span *ngIf="user?.data.apps.availability.trend===0"> 
       <img src="./app/img/icones_sized/stable_arrow_small.png"/> 
      </span>     
      <span *ngIf="user?.data.apps.availability.trend >= 0"> 
       <img src="./app/img/icones_sized/up_arrow_small.png"/>                 
      </span> 
      <span *ngIf="user?.data.apps.availability.trend <= 0"> 
       <img src="./app/img/icones_sized/down_arrow_small.png"/> 
      </span></p> 

Answer 1

あなたは>0、=0、および<0に条件を分ける必要があります。

<span *ngIf="user?.data.apps.availability.trend===0"> 
    <img src="./app/img/icones_sized/stable_arrow_small.png"/> 
</span>     
<span *ngIf="user?.data.apps.availability.trend > 0"> 
    <img src="./app/img/icones_sized/up_arrow_small.png"/>                 
</span> 
<span *ngIf="user?.data.apps.availability.trend < 0"> 
    <img src="./app/img/icones_sized/down_arrow_small.png"/> 
</span> 

Answer 2

このように再組み立てを試してください。

<p class="numbersred" *ngFor="let user of userService.users | async"> {{user.data.apps.availability.trend}}%</p> 
      <span *ngIf="user?.data.apps.availability.trend"> 
       <img src="getImage(user.data.apps.availability.trend)"/> 
    </span> </p>  

コンポーネント。

getImage(trend){ 

    if (trend === 0) 
    return './app/img/icones_sized/stable_arrow_small.png'; 
    else if (trend > 0) 
    return './app/img/icones_sized/up_arrow_small.png'; 

    return './app/img/icones_sized/down_arrow_small.png'; 
}