angular issue closed

Angularのテンプレート評価式にビット演算を使うとTemplate parse errorが発生する

投稿日:2019年9月5日 更新日:

AngularのテンプレートHTMLでビット演算をすることは禁じられているので代替手段を考えます。

事象

CSSクラスをビット演算で切り替えるテンプレートを書きました。
cond変数は1,2,4をビット値として持つ状態変数です。

<button ion-button clear="true" (click)="clickButton(2)">
    <img id="status1" src="./assets/img/normal.svg" 
        [className]="(cond & 2) ? 'on' : 'off'"/>
</button>

すると実行時、Chromeのコンソールに以下のエラー。

Uncaught Error: Template parse errors:
Parser Error: Missing expected ) at column 18 in [(Cond & 2) ? 'on' : 'off'] in ~

        [ERROR ->][className]="(cond & 2) ? 'on' : 'off'"

文法的におかしいところは無く、cond変数の値がが2,3,7の場合はtrueになってCSSクラス「on」がimgに適用されるはずなのに何故・・・。

原因

Angularは古くからテンプレート評価式の中でビット演算をすることが許されていない為。

No Bitwise, Comma, And Void Operators: You cannot use Bitwise, or void operators in an AngularJS expression.

https://docs.angularjs.org/guide/expression

対処

コントローラにでもビット演算をするメソッドを定義しておき、それを呼ぶことで回避。

コントローラで代替メソッドを定義。

    public checkCond(cond, flg) {
        return cond & flg;
    }

HTMLではビット演算せずに上記メソッドを呼び出す。

<button ion-button clear="true" (click)="clickButton(2)">
    <img id="status1" src="./assets/img/normal.svg" 
        [className]="checkCond(cond, 2) ? 'on' : 'off'"/>
</button>

ただTypescript上でビット演算が出来るようになっても今度はtslintに警告を出されてしまいます。

ERROR: src/pages/****.ts:1065:18 - Forbidden bitwise operation

不便なのでルール的にビット演算を使ってよい、とtslint.jsonルールを変更して更に回避。

{
    "rules": {
    
        (snip)
    
        "no-bitwise": false,   <-- trueから変更

すんなりビット演算させてくれないです。

-angular, issue closed
-

執筆者:

関連記事

スタンドアロンモードのPgAdmin4が開くデフォルトブラウザを変更

PostgreSQL公式GUIクライアントツールの「PgAdmin4」。 PostGISのgeometry型をWeb地図上に表示出来たり、サーバモードで起動すればチーム内で共通的に使えるPostgre …

ブラウザでRSA暗号化したデータをサーバで復号する(Angular + JSEncrypt、Spring MVC)【後編】

前回の続きです。One IT ThingブラウザでRSA暗号化したデータをサーバで復号する(Angular + JSEncrypt、Spring …https://one-it-thing.com …

nvm-windows1.1.6でNode.jsを入れようとするとnpmコマンドのインストールがエラーになる

目次1 事象2 原因3 対処4 まとめ 事象 Win10、nvm-windows 1.1.6環境下でNode.js 10.16.0を入れようとした際に以下のエラーが発生。 C:\src\js\angu …

Eclipse上のpom.xmlが一行目で「Maven構成問題」エラー

目次1 事象2 原因3 対処4 暫定対処? 事象 STSで新規作成したばかりのSpring Bootプロジェクトで、pom.xmlの1行目がエラーになる。 Eclipseは「pleiades-2019 …

キャッシュされているはずのServiceWorker資源にオフラインアクセス出来ない(Workbox + ionicons)

そのHTTPリクエストしたファイル資源、ひょっとしてURLパラメータついてたりしませんか? 目次1 事象2 原因3 対処 事象 ionic3(SPA)でWorkboxを使ったServiceWorker …

 

shingo.nakanishi
 

東京在勤、職歴2n年中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めたアウトプット用プライベートWeb日記数が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけど仲間が居なくて孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。