根据变量的值更改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

else条件后面是没有if的条件。

替换此行

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

由任一

else {color = 'green';}

要么

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

Answer 3

你可以使用类似的指令

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;
  }
}

用法

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

Answer 4

您可以通过执行以下操作来进行小的更改：

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

并更改getStyles方法以返回颜色而不是对象。

Answer 5

我会基于键添加一个类，而不是实际添加颜色。 该解决方案允许您将其他更改附加到类上。

这是代码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="pa-1 bg-warning" [ngClass]="getClassBasedOnKey(40)"> <p>Test</p> </div>