在 html 模板 angular 2 中动态设置组件属性

Question

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

我现在拥有的：

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

但这不能编译。

inArray 是我自己的方法，returns true 或 false。我想看到的是，如果表达式 returns 为真，输出将为

<div danger></div>

在 angular 1 中有这样的语句：ng-attr-... 完全按照上面的方式执行的语句。

Answer 1

设置属性使用attribute binding:

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

如果要有条件地显示空属性 return inArray() 中的空字符串或 null:

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

因此该属性将为空或危险属性不存在。结果是：

<div danger></div>

Dynamically set attribute on component in html template angular 2