这是我的html的一部分:
<div class="container">
这是相关的CSS部分:
.container{
width:100%;
height: 45px;}
@media (min-width: 768px) {
.container{
height:60px;}
现在我想通过ngStyle将这个div的样式绑定到属性。我在app.component.ts中有一个名为isShrinked
的属性,当isShrinked===true
时,我希望div的高度为10px,否则高度将是container
类的css样式设置的默认值。
现在我阅读有关ngStyle的Angular文档,但我找不到正确的语法来实现这一点。我能做的最接近的是添加类似[ngStyle]="{'height': isShrinked?'10px':''}"
的东西但是这显然不起作用,因为我必须在这个三元表达式中给右侧赋值,这不是我打算做的。
有人能帮助我吗?
以下语法应该有效:
[ngStyle]="isShrinked ? { 'height': '10px' } : {}"
[ngStyle]="isShrinked ? { 'height': '10px' } : null"
如果只设置一个样式属性,则可以使用此特定样式绑定获得相同的结果:
[style.height.px]="isShrinked ? 10 : null"
有关演示,请参阅this stackblitz。