JavaScript — динамически добавлять и удалять класс со страницы 7

Динамически добавлять и удалять класс со страницы угловой 7

Я использую Angular 7, и я хочу добавить и удалить динамически добавленный класс

У меня есть API, который возвращает номера.

Что я хочу сделать, это выделить поле столбца, когда число выше / ниже

Существует 2 различных класса с более высоким уровнем применения .changeGreen и с более низким уровнем применения .changeRed

Проблема в том, что когда число больше и класс уже применен, то css не влияет

т. е. если .changeGreen уже применен и число увеличено, .changeGreen класс .changeGreen должен вступить в силу и выделить поле

ФАЙЛ КОМПОНЕНТОВ:

 getCounter() { const endpoint1 = 'http://localhost:8080/counter'; this.http.get{amp}lt;number{amp}gt;(endpoint1) .subscribe(data ={amp}gt; { if (data) { if (this.test1.subs {amp}lt; data) { this.test1['subs'] = data this.test1['class'] = 'changeGreen' } else if (this.test1.subs {amp}gt; data) { this.test1['subs'] = data this.test1['class'] = 'changeRed' } else { this.test1['subs'] = data this.test1['class'] = '' } console.log(this.test1); } setTimeout(() ={amp}gt; { this.getCounter(); }, 2000); }); } 

ФАЙЛ HTML:

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

CSS FILE:

 @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; } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector