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

使用“，” 代替“;” ，并在表达式末尾删除“;” 。将这些行替换为您的代码，即可正常工作。

RandomFragment

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？

2 个答案: