Angular4 - Calcul dans les bindings de style

Question

Y a-t-il un moyen de calcul dans la cible de liaison de style dans Angular4?

J'ai essayé

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

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

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

Answer 1

Vous pouvez utiliser [style.width.px]="1 + 1" pour y parvenir.

Answer 2

cela devrait fonctionner

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

En fait, lorsque vous utilisez [], l'expression doit être et vous ne devriez jamais mettre {{}} la valeur, ce qui est une règle générale Angular2 lorsque vous utilisez l'attribut contraignant.

[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

Vous devez éviter le calcul faire de style à l'intérieur de votre point de vue. Créez simplement une fonction pour gérer ce calcul et ne renvoyez que le résultat.