#html #css #angular #calc #ng-style
#HTML #css #угловой #calc #ng-стиль
Вопрос:
У меня есть этот ngStyle ниже, который работает следующим образом
[ngStyle]="{'height': true ? '100vh' : null }"
но не работает (применяется), когда я использую calc, подобный этому
[ngStyle]="{'height': true ? 'calc(100vh-100px)' : null }"
Кто-нибудь может сказать мне, почему?
Ответ №1:
Все, что вам нужно, это пробел до и после - . вот так —
[ngStyle]="{'height': true ? 'calc(100vh - 100px)' : null }"
Комментарии:
1. спасибо за помощь! это сработало. Есть ли какой-нибудь более короткий синтаксис, где я могу удалить значение null? и, очевидно, замените true на условие
2. Если вы хотите применить несколько условных стилей, вы можете создать объект и передать его и условие appy
component.ts, например. —<some-element [ngStyle]="objExp">...</some-element>или что-то вроде<some-element [ngStyle]="getStyleObj()">...</some-element>