Angular 2で条件付き属性を追加するにはどうすればよいですか？

checkedチェックボックスの要素属性などの要素属性をどのように条件付きで追加できますか？

Angularの以前のバージョンにはNgAttr、私NgCheckedが求めていた機能を提供するものがあると思います。ただし、これらの属性はAngular 2には存在しないようであり、この機能を提供する他の方法はありません。

null それを削除します：

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

または

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

ヒント：

属性とプロパティ

あなたはこのバインディングを追加するHTML要素は、（バインディングで使用される名前のプロパティがない場合checkedがある同じ要素に適用されても、この場合には）ノー角度成分や指示を@Input() checked;し、[xxx]="..."使用することはできません。

こちらもご覧ください HTMLのプロパティと属性の違いは何ですか？。

そのようなプロパティがない場合にバインドするもの

代替手段は[style.xxx]="..."、達成しようとしていること[attr.xxx]="..."に[class.xxx]="..."応じて、です。

そのため<input>だけ持っているchecked属性は、ないcheckedプロパティは[attr.checked]="..."、この特定のケースのための正しい方法ではありません。

属性は文字列値のみを処理できます

よくある落とし穴は、[attr.xxx]="..."バインディングの場合、値（...）が常に文字列化されることです。プロパティとのみが@Input()、ブール値、数値、オブジェクトなどの他の値タイプを受け取ることができます。

要素のほとんどのプロパティと属性は接続されており、同じ名前を持っています。

プロパティと属性の接続

属性にバインドされると、プロパティは属性から文字列化された値のみを受け取ります。
プロパティにバインドされると、プロパティはプロパティにバインドされた値（ブール値、数値、オブジェクトなど）を受け取り、属性は文字列化された値を受け取ります。

属性名とプロパティ名が一致しない2つのケース。

• Angular 2.0テンプレートのラベルに「for」属性を追加中にエラーが発生しました

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor（説明の最初の文を参照してくださいhtmlFor property reflects the value of the for- forそれはCまたはJavaScriptのキーワードだから、おそらく動作しませんでした）

• colspanがAngular 2の既知のネイティブ属性ではないのはなぜですか？

Angularはそれ以降変更され、これらの特殊なケースを認識して処理しているため、そのよう<label [for]="なプロパティが存在しない場合でもバインドできます（と同じcolspan）

angular-2属性の構文は

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

属性の役割を式myAriaRoleの結果にバインドします。

ので使用できます

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

GünterZöchbauerの回答の洗練：

これは今は違うようです。これを実行して、href属性をアンカータグに条件付きで適用しようとしました。「適用しない」場合は、undefinedを使用する必要があります。例として、条件付きでhref属性が適用されたリンクを使用して説明します。

ハイパーリンクの仕様に従って、href属性のないアンカータグはプレーンテキストになり、リンクのプレースホルダーを示します。

私のナビゲーションでは、リンクのリストがありますが、それらのリンクの1つが現在のページを表しています。現在のページのリンクをリンクにしたくないが、それでもリストに表示したい（カスタムスタイルがいくつかあるが、この例は簡略化されている）。

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

これは、スパンタグとアンカータグで2つの* ngIfを使用するよりもきれいだと思います。

入力要素の場合、次のように記述できます。... <input type="radio" [checked]="condition">条件の値はtrueまたはfalseでなければなりません。

スタイル属性についても... <h4 [style.color]="'red'">Some text</h4>

あなたはこれを使うことができます。

<span [attr.checked]="val? true : false"> </span>

既存のscssのHTMLを作成する人には、より良いアプローチを使用できます。
html

[attr.role]="<boolean>"

scss

[role = "true"] { ... }

そうすれば、<boolean> ? true : null毎回する必要はありません。

ここでは、段落は 'isValid'がtrueの場合のみ印刷されます/値が含まれています

<p *ngIf="isValid ? true : false">Paragraph</p>

以下のコードに追加されているように、特定のフィールドだけにツールチップを設定したかったのですが、次のコマンドを使用して配列を有効にできるように、複数のツールチップを表示したいと考えています。

カスタムデータツールチップ属性を持つ複数の要素：

1：[ 'key1ToHaveTooltip'、 `key2ToHaveTooltip ']。includes（key）

2：['key1ToHaveTooltip'、 'key2ToHaveTooltip']。indexOf（key）> -1

複数の要素にツールチップ属性を持たせる。

   <div *ngFor="let key of Keys"
             [attr.data-tooltip]="key === 'IwantOnlyThisKeyToHaveTooltipAttribute' 
                                           ? 'Hey! I am a tooltip on key matched'
                                           : null">
   </div>

インラインマップも便利です。

それらは、もう少し明示的で読みやすくなっています。

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

3進構文またはngIfs（など）が気に入らない場合に備えて、同じことを実行する別の方法。