如何根據值返回顏色為 angular 的文本

Question

我想更改名稱並為我的文本添加不同的顏色取決於值。 我有這個 function 它返回文本，但我也想為每個文本添加顏色。

  getEstado(data) {
    switch (data) {

      case 1:
        return '<li>Aprobado</li>';
        
        break;
      case 2:
        return  '<li>Negado</li>';
        break;
      case 3:
        return '<li>Suspendido</li>';
        break;

      default:
        break;
    }
    
  }

我在這里調用 function

ngOnInit(): void {
    this.columns = [
       
        {
            header: "Estatus",
            field:"estado",
            width: "150px",
            formatter: (data) => this.getEstado(data.estado), 
           
        }
       
    ];
    this.getData();
} ;

Answer 1

您可以為每種顏色添加class並根據 function 中的條件添加類：

getEstado(data) {
  switch (data) {

    case 1:
      return '<li class="text-danger">Aprobado</li>';
    
      break;
    case 2:
      return  '<li class="text-success">Negado</li>';
      break;
    case 3:
      return '<li class="text-warning">Suspendido</li>';
      break;

    default:
      break;
  }

}

然后你可以為 css 中的類添加顏色：

.text-danger {
  color: red;
}

.text-success{
  color: green;
}
.text-warning{
  color: yellow;
}