8」は、データをHTTPサービスでリモートから読み込んで表示し、書き替えて保存しました。新たなデータを加えたり、すでにあるデータも削除できるようにします。HTTPサービスでリモートのデータを加えたり除いたりする」をお読みください。08」で書いたコードに手を加えてゆきます。新たなデータは、リスト表示のモジュール(heroines.component)から加えることにしましょう。テンプレートには、つぎのようにタイトル(<h2>要素)の下に要素(<div>)を書き加えます。中に含めるのはデータを打ち込むテキスト入力フィールド(<input>要素)と「追加」のボタン(<button>要素)です。2のローカル変数とexportAs」の「ローカル変数と#シンタックス」参照)。ボタンのクリック(clickイベント)で呼び出すコールバックは、このあとコンポーネントに定めるメソッド(add())です。引数には、テキスト入力フィールドの変数から参照したテキストの値(valueプロパティ)を渡します。そのうえで、テキストは空にしました。heroineName.value=''">追加</button></div>つぎに、リスト表示のモジュール(heroines.component)に定めるメソッド(add())は、つぎのように引数(name)に受け取ったテキストから要らない余白をString.trim()メソッドで取り除き、値のあることを確かめたうえで、リモートのデータを扱うサービス(heroineServiceプロパティ)にこのあと備えるメソッド(create())に渡します。コールバックが受け取ったオブジェクト(heroine)は、データ(heroinesプロパティ)の配列に加えています。null;});}}データを扱うサービスのモジュール(heroine.service)に備えるのは、データを新たにつくるつぎのメソッド(create())です。受け取った値(name)をJSON文字列にしてHttp.post()メソッドにリクエストとして渡し、Observableオブジェクトのデータで返します。これで、テキスト入力フィールドに打ち込んだテキストが、新たなデータとして加えられるようになりました(図001)。手を加えたモジュールとテンプレートは、以下のコード001のとおりです。HTTPサービスでデータを除くすでにリモートに加えられているデータを、HTTPサービスで取り除けるようにしましょう。リスト表示のモジュール(heroines.component)で、項目ごとに削除のボタンをつけることにします。テンプレート(heroines.component.html)のリスト項目(<li>要素)に、つぎのようにボタン(<button>要素)を加えます。クリック(clickイベント)したらコンポーネントのメソッド(delete())を呼び出すのは、これまでと同じつくりです。引数には、削除すべきその項目のデータ(heroine)を渡します。Event.stopPropagation()メソッドを呼び出して、親の<li>要素にクリックイベントが伝わるのを止めました。$event.stopPropagation()">x</button></li>リスト表示のモジュール(heroines.component)に定めるメソッド(delete())は、つぎのようにデータを扱うサービス(heroineServiceプロパティ)のメソッド(delete())に取り除くデータのidを渡します。リモートのデータはサービスにより除かれます。このコンポーネントのデータも改めなければなりません。そこで、削除するデータはArray.filter()メソッドで、プロパティ(heroines)の配列から取り去りました。その項目が選択されていた場合(selectedHeroine)は外します。null;}});}}データを扱うサービスのモジュール(heroine.service)に加える削除のメソッド(delete())は、受け取ったidから定めたURLをつぎのようにHttp.delete()メソッドに渡します。これで、HTTPサービスによりリモートのデータが除かれるのです。null).catch(this.handleError);}}リスト表示のモジュール(heroines.component)に加えた削除ボタン(<button>要素)のスタイルも整えましょう。前掲テンプレートでボタンにはclass属性(delete)を与えました。このクラスに、CSSファイル(heroines.component.css)でつぎの定めを加えます。!important;color:white;}これで新たなデータを加えるだけでなく、すでにある項目も削除ボタンで除くことができるようになりました。手直ししたモジュールとテンプレートおよびCSSの定めは、つぎのコード002のとおりです。9」として、サンプルコードをアップロードしました。実際の動きや、すべてのモジュールおよびテンプレート、CSSのコードは、こちらでお確かめください。