*ngIf が面白い。paje.jsonにTypeフィールドを追加予定
空いた時間でAngularやionic関係のサイトを調べています。
昨日の投稿であまり情報が無いと書きましたが、探し方がうまくなったのか、検索エンジンが忖度してくれたのか、それなりに面白い情報が見つかりました。
しばらく投稿しない予定でしたが、ラジオボタンの表示・非表示がもっとシンプルに出来ることが判ったので投稿します。
昨日の段階では、*ngIfの値がtrueあるいはfalseで表示・非表示をコントロールできると理解していましたが、これは式の評価でも可能との事。
ラジオボタンの表示・非表示も、これにより(余分なプロパティを使わずに)、以下のように定義できます。
------------------------------------
<ion-item *ngIf="PageSelectNum>'2'">
------------------------------------
これはラジオボタン3の場合です。PageSelectNumが'2'より大きい場合のみ表示されます。
(選択肢が10を超える場合は、数値変換が要りますが)
ラジオボタン全体は以下の通り
---------------------------------------------------------------
<ion-list>
<ion-radio-group [(ngModel)] = "SelectPage">
<ion-item *ngIf="PageSelectNum>'0'">
<ion-label>{{PageSelectText1}}</ion-label>
<ion-radio slot="start" value={{PageSelectPage1}}></ion-radio>
</ion-item>
<ion-item *ngIf="PageSelectNum>'1'">
<ion-label>{{PageSelectText2}}</ion-label>
<ion-radio slot="start" value={{PageSelectPage2}}></ion-radio>
</ion-item>
<ion-item *ngIf="PageSelectNum>'2'">
<ion-label>{{PageSelectText3}}</ion-label>
<ion-radio slot="start" value={{PageSelectPage3}}></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
---------------------------------------------------------------
また、paje.jsonの各ページにTypeフィールドを追加すると、ページの種類(選択肢を選ぶページ、サイコロを振るページなど)により、異なるデザインのページ表示が最小限のコードで実装できそうですね。
なかなか面白いですね、Angular!!




