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”时出现此错误：

未捕获的错误：模板解析错误：解析器错误：缺少预期：位于[{background-color：getColor（）}]中的第12列 ng：///AppModule/ArticlesComponent.html@1：30（“ ] [ngStyle] =“ {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()}">

尽管如此，您仍然需要单引号。

“已解决”问题，使用ngStyle更改背景颜色

2 个答案: