~Linux、MySQLからAJAXまでAngular2のプロパティバインディングとアトリビュートバインディングAngular2のプロパティバインディングとアトリビュートバインディングについてまとめました。※Angular2の2.0.0版、TypeScriptを使って確認したものです。(デモはv4.4.3、v2.0.0で動作確認)※目次をクリックすると目次の下部にコンテンツが表示されます。1.プロパティバインディング2.HTMLアトリビュート(attribute)とDOMプロパティ(property)3.アトリビュートバインディング4.プロパティバインディングを使って有効、無効の切替え5.デモプロパティバインディング・コンポーネント内で定義したプロパティの値などをDOM要素のプロパティにセットする。●構文プロパティ名を角括弧でラップするか、”bind-“をプレフィックスする。}}HTMLアトリビュート(attribute)とDOMプロパティ(property)・アトリビュートはHTMLに記述され定義。プロパティはHTMLから構築されたDOMによって定義。・いくつかのHTMLアトリビュートはプロパティと1:1でマッピングされる(idなど)が、あるHTMLアトリビュートは対応するプロパティがない(colspanなど)。・あるDOMプロパティは対応するHTMLアトリビュートがない(textContentなど)。・DOMプロパティは、初期値から変更された場合、現在の値がプロパティの値になるが、HTMLアトリビュートの場合は初期値のまま。value=”名前”>ユーザーが”鈴木”と入力し変更した場合。DOM要素の”value”プロパティの値は、”鈴木”。HTMLの”value”アトリビュートの値は、”名前”。//”名前”がリターン。アトリビュートバインディング・aria、svg、tableのspanアトリビュートは、対応する要素プロパティがない。このような場合に、アトリビュートバインディングを使用する。property”のエラーが発生する。1}}”>Three-Four</td></tr>プロパティバインディングを使って有効、無効の切替えinput要素のreadonly、チェックボックスのchecked、option要素のselected、button要素のdisabledは、属性名と値のペアで指定せず、属性名を指定するかしないかで有効、無効を切替えています。Angular1では、ng-disabled、ng-checked、ng-readonly、ng-selectedディレクティブを使って設定していましたが、Angular2ではプロパティバインディングを使って設定します。1ボタンの有効無効を切り替え“checkValue”の値がtrueの場合は”disabled”属性が有効になります。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。