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

<强> USAGE

<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

中的字符串添加类

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

根据变量的值更改div的颜色

5 个答案: