web-dev-qa-db-ja.com

で条件付き属性を追加する方法 Angular 2？

どうすれば要素属性を条件付きで追加できますか。チェックボックスのchecked

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

javascriptangular
182
Jonathan Miles

nullはそれを削除します。

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

または

[attr.checked]="value ? 'checked' : null"
425
Günter Zöchbauer

角度2の属性構文では、

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

属性ロールを式myAriaRoleの結果にバインドします。

そう使用することができます

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

精製GünterZöchbauer答え：

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

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

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

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

これは、スパンタグとアンカータグに2つの* ngIfを使用するよりもクリーンです。

10
Ragnaraxis

それが入力要素であるならば、あなたは....のように書くことができます。<input type="radio" [checked]="condition"> conditionの値は、真または偽でなければなりません。

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

3
Rohit Tirmanwar

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

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

0
WapShivam