HTTPサービスでリモートのデータを取り出して書き替えられる」は、HTTPサービスによりデータをリモートから取り出し、書き替えるようにしました。データを新たに加えたり、すでにあるデータも除けるようにしましょう。HTTPサービスでデータを加えるまずは、HTTPサービスで新たなデータを加える処理です。08」04「書き替えたデータを更新する」参照)。{})データを加えるメソッド(addHeroine())は、サービスのモジュール(heroine.service)につぎのように加えます。引数(heroine)はHeroineクラスで型づけされたオブジェクトです。HttpClient.post()を使うほかは、データを更新するメソッド(updateHeroine())と組み立てはほぼ変わりません。データのidプロパティはサーバー側で振りますので、引数オブジェクトはnameプロパティしかもたず、解決したオブジェクト(tap()オペレータのコールバックが受け取る引数heroine)からid値を取り出しています。this.log(`番号${heroine.id}にデータを追加`)),catchError(this.handleError<Heroine>('addHeroine')));}}データはリスト表示のコンポーネント(heroines.component)から加えることにして、クラス(HeroinesComponent)につぎのようにメソッド(add())を定めます。引数(name)はデータとして加える文字列です。String.trim()メソッドで前後の空白は除いて、空でないことを確かめたうえで、サービスのクラス(HeroineService)に加えた前掲メソッド(addHeroine)を呼び出します。渡すのは文字列をプロパティ(name)に納めたオブジェクトです。リストに表示するため、クラスのプロパティ(heroines)にもデータを加えなければなりません。as構文はそのあとに添えた型(Heroine)でデータを評価し直します。=>this.heroines.push(heroine));}}リスト表示コンポーネント(heroines.component)のテンプレートには、つぎのようにテキスト入力フィールド(<input>要素)とボタン(<button>要素)を加えます。ボタンクリック(clickイベント)でデータ追加のメソッド(add())を呼び出し、引数には入力フィールドのテキストを渡せばよいでしょう。要素に属性のかたちでハッシュ(#)を添えた識別子(heroineName)は、テンプレートで参照する変数です。ボタンをクリックしたら、入力フィールドのテキスト(valueプロパティ)は空にします。heroineName.value=''">追加</button></div>これで、リスト表示の画面にテキスト入力フィールドが備わりました(図001)。テキストを打ち込んだら、「追加」ボタンでリストに項目が加えられます。項目の番号は、前述のとおりデータサーバーが振る連番です。HTTPサービスで項目のデータを除くつぎは、サーバーのデータから項目を除く処理です。サービスモジュール(heroine.service)のクラス(HeroineService)に、つぎのようにメソッド(deleteHeroine())を加えます。引数(heroine)は削除するデータのオブジェクトです。HttpClient.delete()メソッドに、ふたつの引数、URLとオプションのオブジェクトを渡して呼び出します。URL(url)には引数のプロパティ(id)から得た番号を添えて定めています。Observable.pipe()メソッドにつなげた処理は、クラスの他のメソッドと基本的に同じです。this.log(`番号${id}のデータを削除`)),catchError(this.handleError<Heroine>('deleteHeroine')));}}データを除くのもリスト表示コンポーネント(heroines.component)の仕事です。テンプレートにつぎのように、項目ごとに削除のボタン(<button>要素)を加えます。クリック(clickイベント)で呼び出すメソッド(delete())は、このあとコンポーネントのクラスに定めます。引数はその項目データのオブジェクト(heroine)です。CSSに以下の指定を書き加えれば、削除ボタンのスタイルが整います(図002)。white;}図002■リスト表示コンポーネントの項目に削除ボタンが加わったリスト表示コンポーネント(heroines.component)のクラス(HeroinesComponent)に加えるのがつぎの削除のメソッド(delete())です。引数(heroine)には削除するデータのオブジェクトを受け取ります。クラス(HeroinesComponent)のデータのプロパティ(heroines)からArray.filter()メソッドでその項目を除き、リストから消します。つぎに呼び出すのが、サービス(heroineService)に加えた前述のメソッド(deleteHeroine())です。データのオブジェクトを引数に渡します。そのうえで、戻り値のObservableオブジェクトに対して、Observable.subscribe()メソッドを引数(コールバック)なしで呼び出してください。この呼び出しがないと処理は実行されず、サーバーのデータは削除されません。heroine);this.heroineService.deleteHeroine(heroine).subscribe();}}これで、HTTPサービスによりサーバーに対して、リスト表示の画面からデータを加えたり、リスト項目のデータを除いたりできるようになりました。書き替えたリスト表示コンポーネント(heroines.component)のTypeScriptコードとテンプレートおよびCSSファイルの中身はつぎのコード001のとおりです。コードを改善するTypeScriptコードにあとふたつ手直しを加えましょう。5入門」が下じきにしている公式Tutorial「HTTP」のコードでは、サービスモジュール(heroine.service)のデータを削除するメソッド(deleteHeroine())は、ひとつの引数(heroine)にふたつの型づけが与えられています。つぎのように型を縦棒(|)で結ぶと、それらのいずれかの型(union型)という定めになります。データのオブジェクト(Heroine)のほかに、数値(number)が受け入れられ、項目番号を渡してもデータが除けるということです。今回書いたコードでは、番号を受け取ることはありません。`${this.heroinesUrl}/${id}`;}}もうひとつは、不具合の改善です。リスト表示の画面で項目をすべて削除してから新たに追加すると、コンソールにはつぎのようなエラーが出て、入力したテキストが加わりません(図003)。データの配列を空にすると、番号(id)が振られず、そのあとの処理は正しくできないようです。ids."図003■入力したテキストがリストに加わらないそこで、リスト表示のコンポーネント(heroines.component)は、データ追加のメソッド(add())からサービス(heroineService)のメソッド(addHeroine())を呼び出すとき、引数にデータ配列の長さ(Array.lengthプロパティ)も渡すことにします。this.heroines.length)}}サービスのコンポーネント(heroine.service)はこれに応じて、データ削除のメソッド(addHeroine())が第2引数(numHeroines)にデータ配列の長さ0を受け取ったときは、つぎのようにオブジェクト(heroine)のidプロパティに初期値11を与えたうえで、HttpClient.put()メソッドにより番号とともにデータを与えるようにします。これで、リスト項目をすべて削除しても、新たなテキストの項目が加えられるでしょう。heroineOvserbable}}書き上がったサービスモジュール(heroine.service)のTypeScriptコードは、つぎのコード002にまとめます。リスト表示コンポーネント(heroines.component)のTypeScriptコードは1行直しただけですので、改めて全体は示しません。09」をご覧ください。in-memory-web-apiモジュールの仕様によるようです。抽象クラスBackendServiceのデフォルト番号を与えるBackendService.genIdDefault()メソッドはBackendService.isCollectionIdNumeric()を呼び出し、今あるデータが数値のidプロパティをもつときのみ最後の値に1加えた番号を返します(前掲のエラーはここで生じました)。新たな番号を振るのはBackendService.genId()メソッドで、InMemoryDbServiceを実装するInMemoryDataServiceクラス(in-memory-data.serviceモジュール)からオーバーライドできます。引数のデータ配列の長さ(Array.lengthプロパティ)が0、つまり空のときは初期値(11)を返します。1がメソッドの戻り値です。6)のスプレッド演算子...は、配列をカンマ区切りの引数に変えてMath.max()メソッドに渡します。11;}}そうすると、リスト表示コンポーネント(heroines.component)とサービスモジュール(heroine.service)のTypeScriptコードはもとに戻してしまえます。書き直したコードの全体は改めて掲げません。09-2」でそれぞれのファイルのコードをお確かめください。in-memory-web-apiモジュールのメソッドをオーバーライドする」を追加。