如何在TypeScript+Angular中用三元运算符修改元素显示样式？

问题1：如何用三元运算符修改元素的visibility样式？ #

在Angular里，咱们可以通过属性绑定结合三元运算符快速控制元素的visibility样式，步骤很直观：

1. 先在TypeScript组件类里定义一个布尔变量，用来作为可见性的开关：

// 你的组件类示例
export class YourComponent {
  isElementVisible: boolean = true; // 初始状态设为可见
}

2. 接着在模板中使用[style.visibility]绑定这个变量，配合三元运算符切换visibility的取值：

<!-- 模板代码 -->
<div [style.visibility]="isElementVisible ? 'visible' : 'hidden'">
  我是受控制的元素
</div>

这里要注意，CSS的visibility属性可选值是visible（可见）、hidden（隐藏但仍占据页面空间）、collapse（主要用于表格元素），别和display的取值搞混哦~

问题2：控制display的block和none，写法是不是正确的？ #

你这里有个小细节出错啦！你写的[style.visibility]对应的是CSS的visibility属性，但你要控制的是display属性，所以得把绑定的属性改成[style.display]才行。

正确的写法应该是：

<div [style.display]="anyVariable ? 'block' : 'none'">
  我是通过display控制的元素
</div>

而且你对逻辑的理解完全正确：当anyVariable为true时，元素会被设为display: block（显示且占据对应空间）；当anyVariable为false时，元素设为display: none（完全隐藏，不占据页面空间）。

顺便补充个小知识点：visibility: hidden和display: none的核心区别是，前者隐藏元素但保留它在页面上的占位，后者直接移除元素的占位，页面布局会随之调整~

内容的提问来源于stack exchange，提问作者user14209176