在html模板角度2中动态设置组件的属性

Posted 2023-02-23

【中文标题】在html模板角度2中动态设置组件的属性

【英文标题】：Dynamically set attribute on component in html template angular 2

【发布时间】：2016-09-26 15:45:28

【问题描述】：

如果某个表达式为真，我正在尝试在组件上设置一个属性。有人可以给我一个例子吗？

我现在拥有的：

 <div [danger]="inArray(choice.likers, user, id)"></div>

但这不会编译。

inArray 是我自己的方法，它返回真或假。 我想看到的是，如果表达式返回true，输出将是

<div danger></div>

在 angular 1 中有这样的：ng-attr-... 完全符合上述要求的语句。

【参考方案1】：

要设置属性，请使用 attribute binding：

 <div [attr.danger]="inArray(choice.likers, user, id)"></div>

如果你想在inArray()中有条件地显示一个空属性返回空字符串或null：

inArray() 
    let value;
    if (isInArray) 
      value = '';
     else 
      value = null;
    
    return value;
  

所以属性将为空或危险属性不存在。结果是：

<div danger></div>

【讨论】：

感谢您的评论 muetzerich。此代码允许我动态设置属性的值，但我想要实现的是设置属性本身。

澄清一下：您的代码的输出是：danger="true"，但我只想设置属性而不给它一个值。

试试这个 [attr.danger]="inArray(choice.likers, user, id) ? true : null" -> null 删除危险属性

我很抱歉，但仍然是同样的问题：danger="true"。似乎这不适用于属性。尽管我在文档中找到了一个确实有效的示例 [已禁用]。我会尝试创建一个 plunkr。

一个空字符串 '' 而不是 true 似乎可以解决问题。谢谢！