样式使用组件功能HTML对象

<table *ngIf="datoer"> 
     <tr> 
      <th>Man</th> 
      <th>Tir</th> 
      <th>Ons</th> 
      <th>Tor</th> 
      <th>Fre</th> 
      <th>Lør</th> 
      <th>Søn</th> 
     </tr> 
     <tr> 
      <td *ngFor="let cell of ukeEn()"> 
       {{cell.text}} 
       <div class="outer" *ngIf="datoerContains(cell) != null"> 
        <div class="circle" id="circle" *ngFor="let circle of datoerContains(cell)"> 
       // <script> 
       // document.getElementById("circle").style.background-color = anyFunction(); 
       // </script> 
       </div> 
       <div class="details" *ngFor="let circle of datoerContains(cell)"> 
        {{circle.skole}} <br> 
        {{circle.kommentar}} <br> 
        SFO: {{circle.sfodag}} 
        </div> 

       </div> 
      </td>    
     </tr> 
</table>

这是用HTML编写的与角2 我想要做的，是通过调用我的component.ts文件中的函数返回像'red'字符串设定circle类的background color 。请查看我希望如何工作的评论。这可能吗？如果是，如何？样式使用组件功能HTML对象

来源

2016-11-14 MariusJ

您可以使用样式的绑定或ngStyle指令：

<div class="circle" id="circle" [style.background-color]="anyFunction()" 
<div class="circle" id="circle" [ngStyle]="{'background-color': anyFunction()"

直接绑定到功能的，虽然气馁，因为这些功能被称为每次变更检测周期。将此类函数的结果分配给属性并从视图绑定到该属性通常更高效。

来源

2016-11-14 20:50:36

非常好，谢谢！ “从视图到该属性绑定”是什么意思？像例如'anyFunction（）.color'？ – MariusJ

例如，你有一个'@Input set color（value：String）{this.backgroundColor = anyFunction（value）; }'然后使用'[style.background-color] =“backgroundColor”'。这样你就不会直接绑定到一个函数。 –

样式使用组件功能HTML对象

回答

相关问题