如何在 Angular 8.2.14 中正确使用 ngStyle？

Question

我正在学习Angular。 HTML、CSS、JS我懂一点。每当我尝试使用下面给出的 ngStyle 时，页面就会变黑，直到我删除它，页面才处于非活动状态。请帮忙！

<div class="play-container" [ngStyle]="{
   'background-color': clickCounter > 4 ? 'yellow':'lightgray';
   'border':           clickCounter > 4 ? '4px solid black':'none';}">
   <p>
      <input type="text" [(ngModel)]="name"><br>
      <strong>You said: </strong> {{name}}
   </p>
</div>

Answer 1

使用 ","" 代替 ";" 并删除 ";"表达式的结尾。在您的代码中替换这些行，它将正常工作。

[ngStyle]="{'background-color': clickCounter > 4 ? 'yellow':'lightgray','border': clickCounter > 4 ? '4px solid black':'none'}"

Answer 2

<div [ngStyle]="{'color':getColor(date)}">{{ date }}</div>

[ngStyle]="{'cssProperty':getCssProperty(if need to send value)}"

要获得 Css 属性值，您可以通过其他方法获得，或者可以清楚地提及它

Stackblitz Example

以你为例[ngStyle]="{'background-color': clickCounter > 4 ? 'yellow':'lightgray' , 'border': clickCounter > 4 ? '4px solid black':'none'}"

如何在 Angular 8.2.14 中正确使用 ngStyle？

How to properly use ngStyle in Angular 8.2.14?

ng-style

angular