在 Angular 中，条件渲染是非常基础且必须的功能。当我们需要根据某个条件来决定展示或隐藏某个元素时，就需要使用条件渲染。
在实现条件渲染时，我们可以使用 Angular 自带的 *ngIf 指令，但是还有一种更加简洁和优雅的方式，就是使用 ternary operator。
什么是 ternary operator？
ternary operator，也被称为三元运算符，它是一种简写的 if...else 语句。它可以用一个简单的语法来替代 if...else，从而让代码更加简洁和易读。
在 JavaScript 中，三元运算符的语法格式为：
--------- - ----- - -----
如果条件 condition 成立，返回 expr1，否则返回 expr2。
在 Angular 中，我们可以使用 ternary operator 来实现条件渲染。下面是一个简单的例子，通过判断一个变量的值来决定是否渲染一个按钮：
------- ----------------- - ---- - ----------------------
在上面的例子中，我们使用了两个问号来实现 ternary operator。如果 showButton 变量的值为 true，则返回 true，否则返回 false。
常见的使用场景
除了用于条件渲染之外，ternary operator 还可以应用于很多其他的场景。下面是一些常见的使用场景：
绑定样式
我们可以使用 ternary operator 来绑定样式。例如，根据一个变量的值来决定是否应用某个样式：
---- ---------------- - ----- - ---------------------
在上面的例子中，如果 isRed 变量的值为 true，则应用 red 样式，否则应用 blue 样式。
绑定属性
我们可以使用 ternary operator 来绑定属性。例如，根据一个变量的值来决定是否应用某个属性：
---- ---------------- - ------------- - --------------- --
在上面的例子中，如果 isEnabled 变量的值为 true，则使用 enabled.jpg，否则使用 disabled.jpg。
总结
在 Angular 中，我们可以使用 ternary operator 来实现条件渲染，这种方式相比于 *ngIf 指令更加简洁和优雅。除了用于条件渲染之外，ternary operator 还可以应用于很多其他的场景，例如绑定样式和属性等。在编写代码时，我们应该根据具体的场景来选择合适的方式来实现功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/645859f8968c7c53b0abcfb2