便利な*ngIfと注意点
Angularの機能を使うと、ゲームブックのような各ページのデータを表示するアプリの開発はかなり楽です。
(とても向いている分野だと思います)
今も読込待ち画面や選択肢タイプの画面そしてサイコロ判定による画面を個別に追加して、ページタイプごとに表示を切り替えていますが、*ngIfが大活躍しています。
ただ、やはり使いどころを間違えると致命的な結果もあり得ます。
先ほど、サイコロ判定の部分を作っていたのですが、以下のようにボタンを2つ用意しました。
---------------------------------------------------------------
<ion-button (click)="fnOnClickJudgement()" *ngIf="BeforeJudgement">サイコロを振れ</ion-button>
<ion-button (click)="fnOnClickNextPage()" *ngIf!="BeforeJudgement">次へ</ion-button>
---------------------------------------------------------------
つまりサイコロを振るためのボタンとサイコロを振った後に結果に従い次のページに飛ぶボタンです。
・サイコロを振る前は上の”サイコロを振れ”ボタンのみ表示
・サイコロを振った後は下の”次へ”ボタンのみ表示
これで行けると浅はかにも思ったわけですが、”*ngIf”はfalseの時にボタンを消し去ってしまい、新たにtrueになっても完全に復活できるわけでは無いようです。
開発ツールに表示されたエラーは以下の通り
---------------------------------------------------------------
NG0303: Can't bind to 'ngIf!' since it isn't a known property of 'ion-button'.
---------------------------------------------------------------
技術的なことを調べて、これを動的な方法で解決するのはめんどくさいと即座に思いました。
幸いと言うか、見た目だけ非表示にする方法も知っていましたので、以下のように解決しました。
---------------------------------------------------------------
<ion-button (click)="fnOnClickJudgement()" [hidden]="!BeforeJudgement">サイコロを振れ</ion-button>
<ion-button (click)="fnOnClickNextPage()" [hidden]="BeforeJudgement">次へ</ion-button>
---------------------------------------------------------------
このように気を付ける点は色々出てくると思いますが、プロパティBeforeJudgementを定義すれば、最小限のコーディングで、実装できるのはありがたいですね。
