「ionic2」まとめ連載（其の１１・動的なページ内容を変更する）

#動的なページ内容を変更する

こんにちは、mucunです。
今回の記事は、動的なページ内容の変更についてです。

前回記事（其の１０）にて、静的・動的の違いについて触れ、
静的なページ内容の変更を実施してみました。
今回は、動的なページ内容の変更です。
頑張っていきましょう！

繰返しになりますが、動的な内容とは、条件によって切り替わる内容です。
例えば、登録制のページでの「ようこそ、○○さん」というメッセージです。
「○○さん」はユーザー名称ごとに切り替わります。
つまり、ログインユーザーという条件によって切り替わる訳です。
今回テストでも、その「ようこそ、○○さん」のメッセージ表示をやってみましょう。

先ずは、そのテンプレートを作成します。
「○○」部分以外は直書きでメッセージを書き、「○○」部分は変数にします。

ソースは以前の回で使ったものと同じソースを使います。
（※（其の４で取得・変更し、其の１０で更に変更を加えたもの）
エディターで「(「ionic2」フォルダ)/app/hello-ionic.html」を開きます。

そして、以下のコードを最終行（と書かれている行）の上に挿し込みます。

追加コード

<ion-card>

  <ion-card-content>
    ようこそ、{{user_name}}さん！
  </ion-card-content>

</ion-card>

修正後ソース

htmlの修正の次は、「(「ionic2」フォルダ)/app/hello-ionic.ts」を開きます。

現在は、必要最低限の表記という感じです。
ここに、以下のコード変更を実施します。

修正前（7～11行目）

export class HelloIonicPage {
  constructor(){

  }
}

　　↓ 変更

修正後（7～13行目）

export class HelloIonicPage {
  public user_name;
  
  constructor(){
    this.user_name = "○○";
  }
}

修正後ソース

この状態で、「ionic serve」を実施しているブラウザを見てみると、
「typescript」で設定した値が、「html」に渡されて表示されています。

上記が出力のテンプレートが作られました。
後は、条件を加えましょう。

画面上に、状況を変更するボタンを作ります。
「(「ionic2」フォルダ)/app/hello-ionic.html」の
最終行（と書かれている行）の上に、以下コードを挿し込みます。

追加コード

<button (click)="userChange('田中')">私は、田中です</button>
<button (click)="userChange('マイケル')">私は、マイケルです</button>
<button (click)="userChange('張')">私は、張です</button>

修正後ソース

次に、「(「ionic2」フォルダ)/app/hello-ionic.ts」に、
以下のコード変更を実施します。

修正後（7～13行目）

export class HelloIonicPage {
  public user_name;
  
  constructor(){
    this.user_name = "○○";
  }
}

　　↓ 変更

修正後（7～17行目）

export class HelloIonicPage {
  public user_name;
  
  constructor(){
    this.user_name = "○○";
  }

  userChange(new_user_name){
    this.user_name = new_user_name;
  }
}

修正後ソース

処理のアルゴリズムは、ボタンを押すことで、テンプレートの変数に、
「田中」「マイケル」「張」のいずれかが設定されるというものです。
実際に動かしてみると、上手く設定されています。

これが、動的なページ内容の変更となります。
大事なセンテンスなので、ここはしっかり押さえておきましょう。

以上、今回の記事はここまでとなります。
読んで下さった方、ありがとうございました。<(_ _)>

👈【其の１０・静的なページ内容を変更する】　　👉【其の１２・サーバーのPHPと連携する】