Как изменить цвет фона элемента div, используя сравнение значений JavaScript?

Question

Я хочу изменить цвет фона элемента div в таблице на основе значения базы данных в массиве json.

Answer 1

Смотрите здесь: 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 2

Вы можете использовать директиву ngStyle для применения значений стиля, таких как color: red, font-size .... или ngClass , чтобы применить один или несколько классов CSS

Примеры

  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>

демо ??

Answer 3

как выглядит ваш массив json?это не очень хороший шаблон для использования, но вы можете присвоить вашему div атрибут стиля и передать ему цвет фона (если вам нужно сделать это динамически через js).