2018/03/22更新

[フロントエンド] Angular2+で、data-*へデータバインディングを行う

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
Angular2+(執筆時の最新はバージョン5)で、HTMLタグのdata-xxxcolspan属性へデータをバインディングする方法をブログに書きたいと思います。



目次




何をしたいのか

Angular2+で、以下のようなdata-xxxへデータをバインディングしたいという話です。
<div data-item-id="123"></div>



どうすれば良いのか

Angular2+では、[attr.xxx]attrを用いることで、任意のプロパティに値を設定できます。data-item-idをバインディングしたい場合には、以下のように実装します。
<!-- itemId変数に「123」が入っている想定 -->
<div [attr.data-item-id]="itemId"></div>
attrを用いれば基本的には自由にバインディングできるので、[attr.aria-label]="help"といった使い方もできます。



こんなエラーが出る

例えば普通のHTMLのように、以下のような実装をしたとします(colspan属性を付与しようとしました)。
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
すると、以下のようなエラーが発生します。
Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
ここでの問題は確かにcolspanという属性は存在しますが、Angular的にはcolspanというプロパティを定義していないぞ、ということでエラーになってしまいます。

これに対処するために、今回紹介したattrを使います。
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
このようなエラーは最初は解決しづらくて、Angularの辛いとこの1つ。解決策は単純なのですが、対応できるまでに時間がかかっちゃいますよね・・。



参考資料

以下の公式ドキュメントで、attrが説明されています。

https://angular.io/guide/template-syntax#attribute-binding



最後に

今日はライトなネタですが、Angularでのattrディレクティブの使い方の説明でした。このようなことは簡単なことですが知らないと調べる時間が必要になるので、ちょっとしたことでも頭に入れておくとコーディングのスピードが早くなっていいですね。

最後になりますが本ブログでは、フロントエンド、Swift、PHP、Node.js、Python、Linux、Java、インフラ、Go言語、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。