动态地从角度7的页面添加和删除类

Question

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

我有正在返回数字的api。

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

较高的.changeGreen和较低的.changeRed有2种不同的类别

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

即，如果已经应用.changeGreen并且数量增加，因此.changeGreen类必须生效并突出显示框

COMPONENT FILE：

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，也许我们可以重现此问题。