比较正值或负值并添加箭头

时间:2021-07-02 08:21:26

标签: angular

我陷入困境。 当数字大于 0% 时,应显示绿色箭头。 但当数字小于 0% 时,应显示红色箭头。

我的问题是,当我有 -0.13% 时,两个箭头都会出现。我不理解为什么??通常箭头应该是红色的。

<div class="" style="width: 20% !important;">
    <h5 style="text-align: right;">
        {{ n.variation | number:'1.2-2' | projectformatnum }}&nbsp;%
        <span *ngIf="n.last >= 0"
            style="
                background: url(/assets/images/project-online-sprites.png) -296px -834px no-repeat; 
                position: relative; 
                top: 3px;
                margin-left: 10px;">
            &nbsp;&nbsp;&nbsp;
        </span>
        <span *ngIf="n.variation < 0"
        style="
            background: url(/assets/images/project-online-sprites.png) 1px -834px no-repeat; 
            position: relative; 
            top: 3px;
            margin-left: 10px;">
        &nbsp;&nbsp;&nbsp;
    </span>
    </h5>
</div>

1 个答案:

答案 0 :(得分:0)

它似乎在你使用的第一个

n.last >= 0

但是在你使用的第二个中

n.variation < 0

如果您想更精确,可以使用else,例如:

    <div class="" style="width: 20% !important;">
        <h5 style="text-align: right;">
            {{ n.variation | number:'1.2-2' | projectformatnum }}&nbsp;%
            <span *ngIf="n.last >= 0; else otherstuff"
                style="
                    background: url(/assets/images/project-online-sprites.png) -296px -834px no-repeat; 
                    position: relative; 
                    top: 3px;
                    margin-left: 10px;">
                &nbsp;&nbsp;&nbsp;
            </span>
<ng-template  #otherstuff>
            <span
            style="
                background: url(/assets/images/project-online-sprites.png) 1px -834px no-repeat; 
                position: relative; 
                top: 3px;
                margin-left: 10px;">
            &nbsp;&nbsp;&nbsp;
        </span>
</ng-template>
        </h5>
    </div>