Angular4 - スタイルバインディングでの計算

Question

Angular4のスタイルバインディングターゲットで計算できますか？

私はあなたがそれを達成するために、[style.width.px]="1 + 1"を使用することができます

[style.width]="{{1+1}}" 

[style.width]="{{1+1}}px" 

[style.width]="{{1px+1px}}" 

Answer 1

を試してみました。あなたが[]を使用しているとき

Answer 2

これは、基本的に

[style.width]="1+1+'px'" 

を動作するはずです、式である必要があり、あなたが価値で{{}}を入れてはいけません、これはあなたが属性を使用している一般的なAngular2ルールです結合。

[style.width]="{{1+1}}" is wrong because of `{{}}` in the value 

Answer 3

[style.height.px]="200" 
[style.height.px]="200 + 50" 
[style.height.px]="_commonService.screenHeight" 
[style.height.px]="_commonService.screenHeight + 50" 
[style.height.px]="_commonService.screenHeight - (isHomePage == true?80:140)" 
/* Other Examples **/ 
[ngStyle]="{'margin-top': isHomePage == true ? '0px' : '60px' }" 

Answer 4

あなたはあなたのビュー内のスタイルの計算を行うことを避ける必要があります。この計算を処理する関数を作成して、結果をビューで返すだけです。