NgIf 绑定 img 取决于正负值或相等值 Angular

Question

所以让我向你解释一下，我有一个 Observable 映射 Json 到我的视图，我用 ngFor 解析它并且它工作得很好，然后我想显示一个 img(箭头）取决于该值：如果值为 0，则显示稳定箭头，如果值为负，则显示向下箭头，如果为正，则显示向上箭头...如果有人知道我的想法我会很感激 :) ...请看看我在下面尝试了什么：

问题是如何根据正值、负值或等值显示图像？

  <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';
}

NgIf 绑定 img 取决于正负值或相等值 Angular

NgIf binding img depending from positive negative or equal value Angular

typescript

angular-ng-if

angular