表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

40/210

*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!!

評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ