Проблема с изменением цвета фона с помощью ngStyle

Question

Я использую Angular 7, и моя проблема в том, что когда я помещаю директиву ngStyle в тег "ul", стиль "Color" работает!но с "Background-color" он не работает!

Вот код шаблона:

 <ul class="list-group">
  <li class="list-group-item" [ngStyle]="{color: getColor()}">
    <h4> {{articles}} </h4>
    <button class="btn btn-success" (click)="clickP()">I love It ! {{count}}</button>
    <button class="btn btn-danger" (click)="clickN()">I Hate It ! {{count}} </button>
  </li>
</ul>

А вот код машинописного текста:

  getColor() {
    if (this.count > 0) {
      return "green";
    } else if (this.count < 0) {
      return "red";
    }
  }

Я получаю эту ошибкукогда я использую «background-color» вместо «color»:

Uncaught Ошибка: ошибки синтаксического анализа шаблона: ошибка синтаксического анализатора: ожидание отсутствует: в столбце 12 в [{background-color: getColor ()}] в ng: ///AppModule/ArticlesComponent.html@1: 30 ("] [ngStyle] =" {background-color: getColor ()} ">

Я что-то сделалнеправильно? Спасибо.

Answer 1

Вы почти там, вы можете сделать эту работу, добавив одинарные кавычки, как это

<li class="list-group-item" [ngStyle]="{color: getColor(), 'background-color': getBgColor()}">

Кроме того, вы можете удалить черту и использовать ее с переменной camelCase, как это

<li class="list-group-item" [ngStyle]="{color: getColor(), 'backgroundColor': getBgColor()}">

Вам все еще нужны одинарные кавычки.

Answer 2

Это должно работать

 <ul class="list-group">
  <li class="list-group-item" [ngStyle]="{'background-color': getColor()}">
    <h4> {{articles}} </h4>
    <button class="btn btn-success" (click)="clickP()">I love It ! {{count}}</button>
    <button class="btn btn-danger" (click)="clickN()">I Hate It ! {{count}} </button>
  </li>
</ul>