Question

我有来自服务器数据库的值，我想根据将出现在视图中的 ngIf 更改背景颜色，我该怎么做。？

背景颜色根据 ngIF 值变化..

    <td>
          <div  *ngIf="obj.fruit ==3 "> Apple </div>
          <div  *ngIf="obj.fruit ==2 "> Orange </div>
          <div  *ngIf="obj.fruit ==1 "> Banana </div>
          <div  *ngIf="obj.fruit ==0 "> Cherries</div>
    </td>

Answer 1

这是我的建议

// FruitsType.ts
export enum FruitsType {
    Apple
    Orange
    Banana
    Cherries
}

// your.component.ts
fruitColors = new Map<FruitsType, {name: string, color: string}>([
    [FruitsType.Apple, {name: 'apple', color: 'red'}],
    [FruitsType.Orange, {name: 'orange', color: 'orange'}],
    [FruitsType.Banana, {name: 'banana', color: 'yellow'}],
    [FruitsType.Cherries, {name: 'cherries', color: 'purple'}]
]);


// your.component.html
<td [style.background-color]="fruitColors.get(obj.fruit).color">
   <div>{{fruitColors.get(obj.fruit).name}}</div>
</td>

此外，根据您的需要，这可以转换为指令，这意味着您将能够重用该指令，而无需在每个组件中编写所有这些逻辑。

Answer 2

在test.component.ts中：

getColor(value) {
//return class
  if(value ==3) return 'b-blue'
  if(value ==2) return 'b-red'
}
getValue(value) {
  if(value ==3) return 'Apple'
  if(value ==2) return 'Orange'
}

在test.component.html中：

<td [ngClass]="getColor(obj.fruit)">
   <div>{{getValue(obj.fruit)}}</div>
</td>

根据 ngIf 更改背景颜色

2 个答案: