스타일 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>

이것은 내가 원하는 무엇 2. 각도, 'red' 같은 문자열을 반환 내 component.ts 파일에서 함수를 호출하여 클래스 circle의 background color을 설정하는 것입니다와 HTML로 작성된 것입니다 . 그것이 어떻게 작동하는지에 대한 코멘트를 확인하십시오. 이것이 가능합니까? 그렇다면 어떻게? 이러한 기능은 모든 변경 감지주기를 호출하기 때문에,스타일 HTML 개체 구성 요소의 기능을 사용하여

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

가 직접 기능에 바인딩하지만 권장하지 않습니다 :

출처

2016-11-14 MariusJ

당신은 스타일 바인딩 또는 ngStyle 지시어를 사용할 수 있습니다. 일반적으로 이러한 함수의 결과를 속성에 할당하고보기에서 해당 속성에 바인딩하는 것이 더 효율적입니다.

출처

2016-11-14 20:50:36

우수 감사합니다. '보기에서 그 재산으로 묶어 라'는 것은 무엇을 의미합니까? 예를 들어'anyFunction(). color'처럼? – MariusJ

예를 들어'@Input set color (value : String) {this.backgroundColor = anyFunction (value); }'그리고 나서'[style.background-color] = "backgroundColor"'를 사용하십시오. 이렇게하면 함수에 직접 바인딩하지 않습니다. –

스타일 HTML 개체 구성 요소의 기능을 사용하여

답변

관련 문제