在 Angular 2 中，我们可以使用属性绑定语法来设置属性的值。然而，有时候我们需要根据某些条件来决定是否添加某个属性。本文将介绍如何在 Angular 2 中添加条件属性，并附带示例代码。
添加固定的属性
首先，让我们看一下如何添加固定的属性。假设我们要将一个按钮设置为禁用状态。我们可以通过以下方式实现：
<button [disabled]="true">禁用按钮</button>
在这里，我们将 disabled 属性绑定到了一个固定的值 true。这样，按钮就会被禁用。
添加条件属性
如果我们要根据某些条件来决定是否添加某个属性，我们可以使用三元运算符。比如，我们要根据用户是否登录来决定是否显示欢迎信息。代码如下：
<p>{{isLoggedIn ? '欢迎回来！' : ''}}</p>在这里，我们使用了三元运算符 ?:，当 isLoggedIn 为真时，显示欢迎信息，否则显示空字符串。
同样地，我们也可以根据条件来决定是否添加某个属性。比如，我们要根据用户是否登录来决定是否禁用某个按钮。代码如下：
<button [disabled]="!isLoggedIn">登出</button>
在这里，我们使用了逻辑非 ! 运算符来取反 isLoggedIn 的值。当用户未登录时，按钮将被禁用；否则，按钮将可用。
使用 ngIf 指令
除了三元运算符，我们还可以使用 Angular 2 提供的 ngIf 指令来根据条件添加或移除元素。比如，我们要根据用户是否登录来显示不同的导航链接。代码如下：
<ul> <li><a routerLink="/">首页</a></li> <li *ngIf="isLoggedIn"><a routerLink="/profile">个人资料</a></li> <li *ngIf="!isLoggedIn"><a routerLink="/login">登录</a></li> <li *ngIf="isLoggedIn"><a routerLink="/logout">登出</a></li> </ul>
在这里，我们使用了 *ngIf 指令来根据条件添加或移除 <li> 元素。当用户已登录时，显示个人资料和登出链接；否则，显示登录链接。
总结
在本文中，我们学习了如何在 Angular 2 中添加条件属性。我们可以使用三元运算符来根据条件设置属性的值，也可以使用 ngIf 指令来根据条件添加或移除元素。希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25121