在页面angular 7中动态添加和删除类

Question

我使用的是angular 7，我想添加和删除动态添加的类

我有api，这是返回数字。

我想要做的是当有较高/较低的数字时突出显示列框

在较高的应用.changeGreen和较低的应用.changeRed上有2个不同的类

问题是，当有更高的数字，并且已经应用了类时，css不会影响

也就是说，如果已经应用了.changeGreen，并且数量增加，则.changeGreen类必须生效并突出显示框

组件文件：

getCounter() {
        const endpoint1 = 'http://localhost:8080/counter';

        this.http.get<number>(endpoint1)
            .subscribe(data => {
                if (data) {
                    if (this.test1.subs < data) {
                        this.test1['subs'] = data
                        this.test1['class'] = 'changeGreen'
                    } else if (this.test1.subs > data) {
                        this.test1['subs'] = data
                        this.test1['class'] = 'changeRed'
                    } else {
                        this.test1['subs'] = data
                        this.test1['class'] = ''
                    }

                    console.log(this.test1);

                }
                setTimeout(() => { this.getCounter(); }, 2000);
            });
    }

HTML文件：

    <div class="row" style="font-size: 25px;color: black;">
            <div class="col-md-3" [ngClass]="test1.class">
                <div class="row">
                    <div class="col-md-5">
                        01. <img src="">
                    </div>
                    <div class="col-md-7">
                        Name <br>
                        <ng2-odometer [number]="test1.subs" [config]="{}"></ng2-odometer>
                    </div>
                </div>
</div>
            </div>

CSS文件：

@keyframes fadeInOutGreen {
    0% {
        background-color: white;
    }

    45% {
        background-color: rgba(80, 240, 16, 0.7);
    }

    100% {
        background-color: white;
    }
}

@keyframes fadeInOutRed {
    0% {
        background-color: white;
    }

    45% {
        background-color: rgba(240, 15, 15, 0.7);
    }

    100% {
        background-color: white;
    }
}

.changeGreen {  
    animation-name: fadeInOutGreen;
    animation-delay: 0.2s;
    animation-duration: 1.2s;
}

.changeRed {  
    animation-name: fadeInOutRed;
    animation-delay: 0.2s;
    animation-duration: 1.2s;
}

Answer 1

所以，如果我理解正确的话，问题是当类名.changeGreen已经存在，并且返回一个新的更高的数字时，类应该保持不变，但您希望显示类的效果吗？

如果是这种情况，您可以尝试在每次调用的开始清空类，并根据编号从头开始应用它。我能想到的另一种方法是检查类是否已经存在，然后在再次添加它之前将其删除。

如果你能提供一个从端点返回的json，也许我们可以重现这个问题。