Angular2 アプリ作成(データ保存と表示)

1.概要

複利計算のサンプルアプリの機能拡張をします。
1)入力データをWebブラウザ内のストレージ(localStorage)に保存します。PCの電源を切っても、次にアプリを起動したときに元本と金利の値を復元します。
2)配列データのデータバインドを行い、リスト表示をします。10年間の金額の推移が確認できます。
今回は単純な例ですが、実際のアプリでは上記2つの機能を組みあわせて、複雑なデータベース処理を行います。

[オンラインデモ]
/ngdemo/sample05/

2.アプリの機能拡張

機能拡張のために、CalcComponentクラスの構成ファイルのうち、HTMLとTypeScriptファイルを変更します。

1)proj01\src\app\app.component.htmlの変更
6行目以降のコードを追加します。

<h1>複利計算</h1>
<p>元本 <input [(ngModel)]="principal"> 円</p>
<p>金利 <input [(ngModel)]="interest"> %</p>
<p>10年後 {{calc()}}円</p>

<p>
  <button (click)="save()">保存</button>
</p>
<p *ngFor="let value of calcArray(); let i = index">
{{i}}年目: {{value}}円
</p>

7行目　(イベント名)=”メソッド”は、Angular2独自のテンプレート構文で、該当するイベントが発生した時に呼び出されるメソッドの定義です。ここでは、保存ボタンがクリックされた時に、save()メソッドが呼び出されます。
9行目　*ngFor=”式”は、Angular2独自のテンプレート構文で、式の中で展開した配列やオブジェクトの要素数分のHTML要素を生成します。ここでは、calcArray()で取得した10年分の金額推移の配列データを展開し、11個のpタグを生成しています。

2)proj01\src\app\calc.component.tsの変更
1行目に「,OnInit」を追加、9行目に「implements OnInit」を追加、24行目calcArray() メソッド以降を追加します。

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class CalcComponent implements OnInit{

  principal: number; //元本
  interest: number;  //金利

  //複利計算メソッド
  calc() {
    if (isNaN(this.principal) || isNaN(this.interest)) return null;
    let answer = this.principal;
    for (let i = 0; i < 10; i++) {
      answer = answer * (1 + this.interest / 100);
    }
    return Math.floor(answer);
  }

  calcArray() {
    if (isNaN(this.principal) || isNaN(this.interest)) return null;
    let answer = this.principal;
    let ret = [answer];
    for (let i = 0; i < 10; i++) {
      answer = answer * (1 + this.interest / 100);
      ret.push(Math.floor(answer));
    }
    return ret;
  }

  save(){
    localStorage['principal']= this.principal.toString(); //元本
    localStorage['interest']= this.interest.toString(); //金利
  }

  ngOnInit() {
    if(localStorage['principal'])
    this.principal=localStorage['principal'];
    this.interest=localStorage['interest'];
  }
}

23～32行目　calcArray()メソッドは、10年間の複利計算の経過を配列で返します。
34～37行目　save()メソッドは、保存ボタンをクリックした時に呼び出され、元本と金利の値をブラウザの永続ストレージ(localStorage)に保存します。
39～43行目　ngOnInit()メソッドは、アプリの起動時に呼び出されます。ここでは、永続ストレージ(localStorage)からデータを読み込み、principalとinterest変数に代入しています。2つの変数は、元本と金利の入力欄と双方向バインドしていますので、その値がそのまま表示されます。

7)動作確認
1.Webサーバーが起動中であることを確認します。
2.Webブラウザから、//localhost:4200にアクセスします。
3.複利計算の画面が表示されます。表示されない場合は、ブラウザの再読み込みを行ってください。それでも表示されない時は、コマンドプロンプトに出力されたエラーメッセージを確認してください。
4.元本と金利の欄に数字を入力すると、10年後の金額と1年ごとの金額の推移が表示されます。
5.元本と金利の値を変更すると、リアルタイムに反映されます。
6.計算結果が表示された状態で「保存」ボタンをクリックします。
7.Webブラウザを終了、または電源再起動後に再度、//localhost:4200にアクセスします。
8.保存時のデータの復元を確認します。

弊社では、「Angular2とTypeScriptによる モダンWeb開発セミナー」を開催します。
Angular2の実践的な知識とノウハウを習得できます。
/hp/semi/modern/

(初版)2016年8月2日
(更新)2016年12月1日