首页 文章

如何在Angular 2中添加条件属性?

提问于
浏览
146

我如何有条件地添加元素属性,例如 checked 的复选框?

以前版本的Angular有 NgAttr ,我认为 NgChecked 似乎都提供了我所追求的功能 . 但是,Angular 2中似乎不存在这些属性,我看不到提供此功能的其他方法 .

5 回答

  • -4

    null 删除它:

    [attr.checked]="value ? '' : null"
    

    要么

    [attr.checked]="value ? 'checked' : null"
    
  • 4

    在angular-2属性语法中

    <div [attr.role]="myAriaRole">
    

    将属性角色绑定到表达式myAriaRole的结果 .

    所以可以使用像

    [attr.role]="myAriaRole ? true: null"
    
  • 345

    精炼GünterZöchbauer答案:

    现在这似乎有所不同 . 我试图这样做有条件地将href属性应用于锚标记 . 您必须对“不适用”案例使用undefined . 作为一个例子,我将演示一个有条件地应用了href属性的链接 .

    没有href属性的锚标记变为纯文本,表示链接的占位符,符合hyperlink spec .

    对于我的导航,我有一个链接列表,但其中一个链接代表当前页面 . 我不希望当前页面链接成为链接,但仍希望它出现在列表中(它有一些自定义样式,但此示例已简化) .

    <a [attr.href]="currentUrl !== link.url ? link.url : undefined">
    

    我认为这比在span和anchor标签上使用两个* ngIf更干净 .

  • 24

    如果它是一个输入元素,你可以编写类似的东西.... <input type="radio" [checked]="condition"> 条件的值必须为true或false .

    也适用于样式属性... <h4 [style.color]="'red'">Some text</h4>

  • 2

    Inline-Maps也很方便 .

    它们也更加明确和可读 .

    [class]="{ 'true': 'active', 'false': 'inactive', 'true&false': 'some-other-class' }[ trinaryBoolean ]"
    

    只是另一种完成同样事情的方法,如果你不喜欢三元句法或 ngIf (等) .

相关问题