問題與ngStyle更改背景顏色

Question

我正在使用Angular 7，而我的問題是，當我將指令ngStyle放入“ ul”標簽中時，樣式“ 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”時出現此錯誤：

未捕獲的錯誤：模板解析錯誤：解析器錯誤：缺少預期：在ng：///AppModule/ArticlesComponent.html@1：30（“] [ngStyle] = [[background-color：getColor（）}]]中的第12列“ {background-color：getColor（）}”>

我做錯什么了嗎 ？ 謝謝。

Answer 1

這應該工作

 <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>

Answer 2

您快到了，您可以通過添加單引號來完成此工作

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

另外，您也可以刪除破折號並將其與變量camelCase結合使用，如下所示

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

您仍然需要單引號。