如何根据变量值改变Angular中Div/Card的颜色？含实现方案疑问

嘿，我来帮你搞定这个动态改卡片颜色的问题～下面分两种方式给你梳理，包括优化你现有的方法，以及用Pipe实现的方案：

一、优化你当前的 ngStyle 写法 #

你的思路是对的，但代码里有个小疏漏：函数参数是key，但判断条件里用了未定义的number，得改成用参数key来判断才行。另外可以把代码写得更简洁一点：

getStyles(value: number) {
  let color = '';
  if (value < 40) {
    color = 'red';
  } else if (value >= 40 && value < 80) {
    color = 'yellow';
  } else {
    color = 'green';
  }
  return { color }; // ES6简写，和{ color: color }效果一样
}

模板里的用法没问题，只要把固定的40换成你组件里的变量就行，比如：

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

提示：如果yourScoreVariable是组件类里的属性，直接写变量名就好，不用加引号哦～

二、用 Pipe 实现（更推荐复用场景） #

当然可以用Pipe实现！Pipe天生就是用来做数据转换的，比如把数值转换成对应的样式，而且写完之后整个项目都能复用，非常方便。

第一步：创建颜色转换Pipe #

先写一个Pipe类，负责把数值映射成对应的颜色样式：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'statusColor' })
export class StatusColorPipe implements PipeTransform {
  transform(value: number): { color: string } {
    if (value < 40) {
      return { color: 'red' };
    } else if (value >= 40 && value < 80) {
      return { color: 'yellow' };
    } else {
      return { color: 'green' };
    }
  }
}

第二步：在模块中注册Pipe #

别忘了把这个Pipe加到你Angular模块的declarations数组里，不然模板识别不了它：

@NgModule({
  declarations: [
    // ...其他组件、指令
    StatusColorPipe
  ],
  // ...其他配置
})
export class YourModule { }

第三步：在模板里用Pipe #

现在直接在ngStyle里用Pipe转换你的变量就行：

<div class="p-a-1 bg-warning" [ngStyle]="yourScoreVariable | statusColor"> 
  <p>Test</p> 
</div>

如果你的需求是改背景色而不是文字颜色，只需要把Pipe里的返回值改成{ backgroundColor: 'red' }这类就可以了，灵活调整就行～

内容的提问来源于stack exchange，提问作者cat1244