javascript - 如何在Angular中将ngStyle设置为默认值

这是我的html的一部分：

<div class="container">

这是相关的CSS部分：

.container{
width:100%;
height: 45px;}

@media (min-width: 768px) {
.container{
height:60px;}

现在，我想将此样式的样式绑定到ngStyle的属性。我在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。

关于javascript - 如何在Angular中将ngStyle设置为默认值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51256353/