javascript - 如何在 Angular 中将 ngStyle 设置为默认值
问题描述
这是我的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
container
现在我阅读了关于ngStyle的 Angular 文档,但我找不到正确的语法来实现这一点。我能做的最接近的方法是添加类似[ngStyle]="{'height': isShrinked?'10px':''}"
但是这显然不起作用,因为我必须在这个三元表达式的右侧赋予一个值,这不是我打算做的。
有人可以帮助我吗?
解决方案
以下语法应该有效:
[ngStyle]="isShrinked ? { 'height': '10px' } : {}"
[ngStyle]="isShrinked ? { 'height': '10px' } : null"
如果只设置一个样式属性,则使用此特定样式绑定可以获得相同的结果:
[style.height.px]="isShrinked ? 10 : null"
请参阅此 stackblitz以获取演示。
推荐阅读
- c - 指向 c 中的指针的指针,得到意外的值
- python - 在 Raspberry Pi 上使用 Chrome Webdriver 的问题
- java - 测试视图是否存在,但我的方法返回 false - 它应该返回 true
- c# - 如何让我的 Windows 服务查看 ROT 中的对象?
- c++ - 使用线程不安全的静态变量锁定嵌套函数
- java - java中的继承(子类的子类)
- c# - 与错误膨胀类 android.widget.TimePicker 相关的问题
- datepicker - 如何在 SwiftUI 中使用 ObservedObject 和 DatePicker?
- python - 使用 Python 3+ 将 DBF 文件转换为 CSV 出现错误
- java - 如何在没有此问题的情况下有效地在 Firestore 聊天应用中存储或检索消息?