angular trouble shooting

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, trouble shooting
-

執筆者:

関連記事

Angular11から12にアップデートしたらng serveがproductionモードで起動するようになってしまう

既存のAngular11のプロジェクトを12に上げた際に発生。 目次1 環境2 事象3 原因4 対処5 根本原因6 まとめ 環境 Windows 11Node.js 14.15.1Angular13リ …

git push時に「error: RPC failed; result=22, HTTP code = 501」エラー

目次1 事象2 原因3 対処 事象 オンプレGitLabへのgit push時に掲題のエラーが発生してpushに失敗します。 原因 git push時の1ファイル最大サイズは1Mbyteの為。 git …

Angular8のDefferential Loadで作られたPolyfill抜きJSがブラウザに読み込まれるまでを観察してみる

Angular単体では約30%の削減でした。 2019/05にリリースされたAngular8では、ビルド結果として生成されるバンドルファイルがES6(ES2015)対応しているモダンブラウザ用、とそう …

adb devicesコマンドでAndroid端末を認識しない

目次1 事象2 原因3 解決 事象 USB接続するAndroidによって以下のエラーが出たりします。 C:\src\ionic\awsomeapp>adb devices List of dev …

ローカルネットワーク内のHTTP通信が2回に1回交互にタイムアウトするようになった原因

目次1 事象2 調査3 解決4 その後 事象 ある日突然、オフィスのローカル開発環境でHTTP通信が異常なほど遅くなり、タイムアウトするようになりました。 その後F5でリロードすると普通にレスポンスが …

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯技術者として楽しく生きることを目指しています。デスマに負けず健康第一。