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

Question

这是我的 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，否则高度将是类的 css 样式设置的默认值container。

现在我阅读了有关ngStyle 的Angular 文档，但找不到实现此目的的正确语法。我能做的最接近的是添加类似的内容[ngStyle]="{'height': isShrinked?'10px':''}"但这显然不起作用，因为我必须在这个三元表达式的右侧给出一个值，这不是我打算做的。

有人可以帮助我吗？

Answer 1

以下语法应该有效：

[ngStyle]="isShrinked ? { 'height': '10px' } : {}"
[ngStyle]="isShrinked ? { 'height': '10px' } : null"

如果只设置一个样式属性，则使用此特定样式绑定可以获得相同的结果：

[style.height.px]="isShrinked ? 10 : null"

请参阅此 stackblitz的演示。