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

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

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

前回記事（[其の１０](http://qiita.com/mucunwuxian/items/46ba24a0e0e5918eda74)）にて、静的・動的の違いについて触れ、
静的なページ内容の変更を実施してみました。
今回は、動的なページ内容の変更です。
頑張っていきましょう！

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

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

ソースは以前の回で使ったものと同じソースを使います。
（※（[其の４](http://qiita.com/mucunwuxian/items/54983981a279cda82376)で取得・変更し、[其の１０](「ionic2」まとめ連載（其の１０・静的なページ内容を変更する）)で更に変更を加えたもの）
エディターで「(「ionic2」フォルダ)/app/hello-ionic.html」を開きます。
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/126499/800781dc-1503-b0b0-5ccc-8f848138e734.png">

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

```html:追加コード
<ion-card>

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

</ion-card>
```

修正後ソース
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/126499/22f9ae0b-7762-102f-620f-976a4cd2cd50.png">

htmlの修正の次は、「(「ionic2」フォルダ)/app/hello-ionic.ts」を開きます。
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/126499/7b07ba42-14e8-348e-237b-c6b157fa52eb.png">

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

```ts:修正前（7～11行目）
export class HelloIonicPage {
  constructor(){

  }
}
```
　　__↓ 変更__

```ts:修正後（7～13行目）
export class HelloIonicPage {
  public user_name;
  
  constructor(){
    this.user_name = "○○";
  }
}
```

修正後ソース
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/126499/e5255389-2c9f-2071-ba67-a7605520b191.png">

この状態で、「ionic serve」を実施しているブラウザを見てみると、
「typescript」で設定した値が、「html」に渡されて表示されています。
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/126499/51cbf580-4002-5858-0a15-538907dfc4d5.png">

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

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

```html:追加コード
<button (click)="userChange('田中')">私は、田中です</button>
<button (click)="userChange('マイケル')">私は、マイケルです</button>
<button (click)="userChange('張')">私は、張です</button>
```

修正後ソース
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/126499/e581784c-7d6c-ded3-4386-07fca001fdc5.png">

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

```ts:修正後（7～13行目）
export class HelloIonicPage {
  public user_name;
  
  constructor(){
    this.user_name = "○○";
  }
}
```
　　__↓ 変更__

```ts:修正後（7～17行目）
export class HelloIonicPage {
  public user_name;
  
  constructor(){
    this.user_name = "○○";
  }

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

修正後ソース
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/126499/953b5ad5-bf27-6c6c-54e6-58abd995bd47.png">

処理のアルゴリズムは、ボタンを押すことで、テンプレートの変数に、
「田中」「マイケル」「張」のいずれかが設定されるというものです。
実際に動かしてみると、上手く設定されています。
<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/126499/70c38b8b-d106-fb34-cdbd-dd037a12492d.png">

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

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

[👈【其の１０・静的なページ内容を変更する】](http://qiita.com/mucunwuxian/items/46ba24a0e0e5918eda74)　　[👉【其の１２・サーバーのPHPと連携する】](http://qiita.com/mucunwuxian/items/84f87878911c8fd32254)