javascript - 从页面 Angular 动态添加和删除类 7

Question

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

我有返回数字的 api。

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

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

问题是当有更高的数字并且已经应用​​类时，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，也许我们可以重现该问题。