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

投稿日：2019年9月5日

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

1 事象
2 原因
3 対処

事象

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は古くからテンプレート評価式の中でビット演算をすることが許されていない為。

docs.angularjs.org

AngularJS

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

AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!

No Bitwise, Comma, And Void Operators: You cannot use Bitwise, , or void operators in an AngularJS expression.
https://docs.angularjs.org/guide/expression

対処

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

Stack Overflow

Using & (bitwise AND operator) in Angular ng-if expressions

https://stackoverflow.com/questions/39294927/using-bitwise-and-operator-in-angular-ng-if-expressions

I can't get the & operator to work in an Angular ng-if expression (to use with some bit flags). Suppose we have some HTML like this:<div ng-if="value & 2"> </div>If value eq...

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

    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から変更

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

執筆者：sin7k24