Tour of Heroesをやってみる2
前回に引き続きAngularのチュートリアルTour of Heroesをやっていこうとをもいます
前回の記事はチュートリアルのThe Application Shellをやりました。
wadada420.hatenablog.comということで今回は、続きのThe Hero Editorをやっていきます。
Create the heroes component
まずは、新しいコンポーネントをプロジェクトに追加します。
作業ディレクトリに入って次のコマンドを実行します。
ng generate component heroes
このコマンドを実行すると
Add a Hero Property
上のコマンドを実行した結果生成されたheroes.component.tsに新しくheroという変数を宣言して、それを最初の画面で表示出来るよう書き換えます。
heroes.component.ts
export class HeroesComponent implements OnInit {
constructor() { }
hero = 'Windstorm'; //ヒーロー名を設定
ngOnInit() {}
}
heroes.component.html
{{hero}} <!--tsファイルで宣言したheroを呼び出す-->
app.component.html
これで、実行画面を見てみると下の画像のようになります。
Windstormという文字が表示されています。
Create a Hero class
ヒーローに他の情報を関連付けるためにヒーローオブジェクトを作ります。
src/app/配下にhero.tsファイルを作成し以下のように記述してidとnameの情報をもつ
Heroクラスを作りました。
export class Hero {id: number;name: string;}
実際に使ってみましょう。
heroes.component.tsに戻って、Windstormさんの情報を少し詳しくしてみます。
import { Hero } from '../hero'; //heroクラスのインポート
hero: Hero = {id: 1,name: 'Windstorm'};
これで、名前だけでは無くてIDをもったオブジェクトが出来ました。
ただ、このままだと画面上にはObjectとしか表示されないので、heroes.component.htmlも
編集します。
<h2>{{ hero.name }} Details</h2><div><span>id: </span>{{ hero.id }}</div><div><span>name: </span>{{ hero.name }}</div>
同じ名前が二個出てきてパッとしないのでタイトルの名前は大文字に変えます。
<h2>{{ hero.name | uppercase }} Details</h2>
こうすると、画面にタイトル、ID、名前が表示されて次の画像のようになります。
Edit The Hero
つぎはヒーロー名前などの情報を編集するテキストボックスを作っていきます。
ここでは、AngularのngModelを使うことでテキストボックスと表示されている文字を連携させます。
heroes.component.html
<div><label>name:<!-- hero.nameに関連付ける --><input [(ngModel)]="hero.name" placeholder="name"></label></div>
ただ、このまま実行すると、ngModelが使える設定がされていないので、エラーが出てしまって表示されません。
なので、使えるようにします。
app.module.ts
// NgModelが入っているライブラリをインポートimport { FormsModule } from '@angular/forms';imports: [BrowserModule,
// インポートしたライブラリの読み込みFormsModule],
これで、使えるようになったので、表示される文字と連携したテキストボックスが見れると思います。
今回は、こんなところで終わりにします。
次回はDisplay a Heroes Listをやっていきたいとおもいます。
