ページの各フィールドを表示する
前回で、ゲームブックデータである"Page.json" の各ページのフィールドを読み込む準備が出来ました。
こんどはそれをWebページとして表示させてみます。
現在の"src\app\home\home.page.html"の中身は以下の通り。
今後ソースコードを表示する場合は、特に断りの無い場合、インデント部分を全角スペース変換して表示します。
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<strong>{{PageText1}}</strong>
<ion-button (click)="onClickNextPage()">次へ</ion-button>
</div>
</ion-content>
---------------------------------------------------------------
PageText1だけが表示されていますが、これをページの各フィールドデータを表示するように追加変更します。
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<p><strong>{{PageText1}}</strong></p>
<p>{{PageText2}}</p>
<p>{{PageText3}}</p>
<p>{{PageText4}}</p>
<p>{{PageText5}}</p>
<p>{{PageSelectNum}}</p>
<p>{{PageSelectText1}}</p>
<p>{{PageSelectText2}}</p>
<p>{{PageSelectText3}}</p>
<p>{{PageSelectPage1}}</p>
<p>{{PageSelectPage2}}</p>
<p>{{PageSelectPage3}}</p>
<ion-button (click)="onClickNextPage()">次へ</ion-button>
</div>
</ion-content>
---------------------------------------------------------------
”{{” + プロパティ名 + ”}}”と記述すると、その部分に"home.page.ts"で定義したプロパティの値が表示されます。
また”次へ”ボタンを押した時の関数"onClickNextPage()"の中身も変更して、"PageSelectPage1"のページへ飛ぶように変更します。(現在のデータの作り上、SelectPage1の値は必ずあります。）
---------------------------------------------------------------
onClickNextPage(){
this.ThisPage = PageData[this.ThisPage].SelectPage1;
this.setPropValFromPage();
}
---------------------------------------------------------------
内容は
・ThisPageを現在のページの選択肢1を選んだ時に飛ぶページに変更
・変更されたThisPageのデータをプロパティにセット
これだけでWebページの内容が変更されます。
例えば２ページ目を表示した場合、Webページは以下のようになります。
（Page.jsonの内容は、https://ncode.syosetu.com/n5283hn/15/ ）
---------------------------------------------------------------
湖畔にて
かっての名城も今は城下に山賊の集団が住みつき、陸伝いにはとても近づけないという。そんな訳で白鳥城に向かうには湖を渡るしかないらしいが、あいにくとあなたは泳ぎが出来ない。
とりあえず湖畔に沿って歩いていると、あなたは一人の漁師に会った。漁師は４００ GPで白鳥城の船着場まで送ってくれるという。
3
400GPを払う
あきらめる
漁師を脅す
3
4
5
次へボタン
---------------------------------------------------------------
とても簡単に『ページの各フィールドを表示する』事が実装出来ました。
ただし、これは本当にページの各フィールドの中身を表示するだけですので、次回は選択肢を選び、そのページに移行できるようにします。
