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

【问题标题】：How to set ngStyle to a default value in Angular如何在 Angular 中将 ngStyle 设置为默认值
【发布时间】：2018-07-10 11:13:38
【问题描述】：

这是我的 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':''}" 的内容，但这显然不起作用，因为我必须在这个三元表达式的右侧赋予一个值，这不是我打算做的。

有人可以帮帮我吗？

【问题讨论】：

标签： javascript html angular typescript ng-style

【解决方案1】：

以下语法应该可以工作：

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

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

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

请参阅this stackblitz 以获取演示。

【讨论】：