изменить цвет div в зависимости от значения переменной

Question

Мне нужно изменить цвет моей карты в зависимости от значения переменной

Как я могу это сделать?

Я думал, ты мог бы сделать это?

getStyles(key: number) {
    let color = ''
    if (number < 40) {color = 'red';}
    else if (number >= 40 && number < 80) {color = 'yellow';}
    else (number >= 80) {color = 'green';}
    return {
      color: color
    };
}

<div class="p-a-1 bg-warning" [ngStyle]="getStyles(40)">
   <p>Test</p>
</div>

Или это можно сделать с помощью трубы?

Но если это можно сделать через трубу, то я не совсем понимаю, как

Какая лучшая практика?

Answer 1

Расширяя ответ @ Thatkookooguy

Вы можете создать общую функцию в службе и вызывать ее из каждого компонента, импортируя их в компонент.

import { Injectable } from '@angular/core';

@Injectable()

export class CommonService {

  getClassBasedOnKey(key: any) {
    if (key < 40) {
      return 'red';
    } else if (key >= 40 && key < 80) {
      return 'yellow';
    }
    return 'green';
  }
}

Теперь импортируем сервис в модуль в провайдере:

@NgModule({
  declarations: [ AppComponent ],
  imports: [],
  providers: [ CommonService],
  bootstrap: [AppComponent]
})

И используя его в компоненте и HTML:

import { Component } from '@angular/core';
import { CommonService } from './common.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public _commonService: CommonService) {

  }
}

HTML:

<div class="p-a-1 bg-warning" [ngClass]="_commonService.getClassBasedOnKey(40)">
  <p>Test</p>
</div>

Надеюсь, это поможет .... Счастливое кодирование !!!

Answer 2

Вы можете использовать директиву типа

import { Directive, Renderer2, ElementRef, OnInit, Input } from '@angular/core';

@Directive({
  selector: '[colors]'
})
export class ColorsDirective implements OnInit{
  @Input() colors: number;
  constructor(private renderer: Renderer2, private el: ElementRef) {}
  ngOnInit() {
    const current = this._getStyles(this.colors);
    this.renderer.setStyle(
      this.el.nativeElement,
      'color',
      current
    );
  }
  _getStyles(key: number) {
    let color = '';
    if (key < 40) {
      color = 'red';
    }
    else if (key >= 40 && key < 80) {
      color = 'yellow';
    }
    else  {
      color = 'green';
    }
    return  color;
  }
}

* ИСПОЛЬЗОВАНИЕ 1005 *

<p [colors]="40">PIPPO</p>

Answer 3

else сопровождается условием без if.

Заменить эту строку

else (number >= 80) {color = 'green';}

либо

else {color = 'green';}

или

else if (number >= 80) {color = 'green';}

Answer 4

Я бы добавил класс, основанный на ключе, вместо фактического добавления цвета. Это решение позволяет добавлять дополнительные изменения в класс.

вот код https://stackblitz.com/edit/angular-l4tcxs

в основном, есть 3 класса (по одному для каждого цвета), и код добавляет класс на основе строки в color

// COMPONENT YOU WANT TO USE IN
import {
  Component
} from '@angular/core';
import {
  getClassBasedOnKey
} from './shared-functions';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  getClassBasedOnKey: Function = getClassBasedOnKey;
}

// shared-functions.ts
export function getClassBasedOnKey(key: number) {
  if (key < 40) {
    return 'red';
  } else if (key >= 40 && key < 80) {
    return 'yellow';
  }
  return 'green';
}

.yellow {
  color: yellow;
  background: black;
}

.red {
  color: red;
}

.green {
  color: green;
}

<div class="p-a-1 bg-warning" [ngClass]="getClassBasedOnKey(40)">
  <p>Test</p>
</div>

Answer 5

Вы можете внести небольшое изменение, сделав что-то вроде этого:

<div class="p-a-1 bg-warning" [ngStyle]="{'color': getStyles(40)}">
   <p>Test</p>
</div>

И изменение метода getStyles, чтобы он возвращал цвет, а не объект.