web-dev-qa-db-ja.com

HTMLテンプレートのコンポーネントの属性を動的に設定angular 2

特定の式が真である場合、コンポーネントに属性を設定しようとしています。誰かが例を教えてもらえますか？

私が今持っているもの：

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

しかし、これはコンパイルされません。

inArrayはtrueまたはfalseを返す独自のメソッドです。私が見たいのは、式がtrueを返す場合、出力は

<div danger></div>

angular 1には、上記を正確に実行したng-attr -...ステートメントがありました。

data-bindingangularangular2-template
19
Bram

属性を設定するには、属性バインディングを使用します。

_ <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>
_
45
muetzerich