Question

我想根据json数组中的数据库值更改表中div元素的背景颜色。

Answer 1

您的json数组看起来如何？这不是一个好的模式，但是您可以给div一个style属性，然后将其传递给您的背景色（如果您必须通过js动态地进行设置）。

Answer 2

请参阅此处： https://stackblitz.com/edit/angular-yrosxf?file=src/app/app.component.ts

假设您知道如何将数据库中的数据转换为有角度的。这是一个您可以从...中学到的例子。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: "<div [ngStyle]=\"{'background': data.color}\">some data</div>",
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  data : {};

  constructor(){
    this.data = {"color" : "red"}
  }
}

Answer 3

您可以使用 ngStyle 指令应用样式值，例如color：red，font-size ....或 ngClass 指令以应用一个或多个CSS类< / p>

示例

  colors = [
    {color:'red'},
    {color:'green'},
    {color:'blue'},
  ]

  classes =[
    {_class:'light'},
    {_class:'bold'},
    {_class:'orange'},
    {_class:'light-blue light bold'},
  ]

模板

Colors - ngStyle
<div *ngFor="let c of colors" [ngStyle]="{color:c.color}">
  {{c.color}}
</div>
<br>

Classes - ngClass
<div *ngFor="let c of classes" [ngClass]="c._class">
 {{c._class}}
</div>

demo

如何使用javascript值比较来更改div元素的背景颜色？

3 个答案: