Angularの公式Tutorialは、全体をとおしてひとつの作例「Angular Example - Tour of Heroes: Part 6 」をつくります。この解説を下じきに、もっと細かくコードの動きが確かめられるように、説明の仕方やサンプルも改めて「Angular 5入門」を書きました。そのとき、公式の作例にいくつか気づいて直した点があります。それらをご紹介しましょう。
要らないコードを除く
「Routing」の「Remove dead code (optional)」は、書き直しの結果要らなくなったコードを除いています。これに加えてもうひとつ削った方がよいのは、HeroDetailComponentクラスのデコレータ関数Input()です。
import { Component, OnInit, Input } from '@angular/core';
export class HeroDetailComponent implements OnInit {
@Input() hero: Hero;
}
コンポーネントの詳細情報(hero-detail.component)をリスト表示(heroes.component)から分け、選択されたデータをサービスから得るようにしたからです。親だったリスト表示のコンポーネントから参照を得るためにプロパティ(hero)に添えていたデコレータ関数Input()は意味がなくなります。
import { Component, OnInit} from '@angular/core';
export class HeroDetailComponent implements OnInit {
hero: Hero;
}
公式Tutorialにもこの修正が加えられそうです(「refactor(aio): refining code of tutorial 7 routing」)。
リストを空にするとデータが加えられない
まず、リスト表示の画面ですべての項目を削除します(図001)。
図001■リスト項目がなくなった
つぎに、新たな項目をテキストフィールドに入力して、[add]ボタンを押します(図002)。
図002■新たな項目を入力する
すると、番号もテキストも空の項目が加えられます(図003)。ブラウザのコンソールを確かめると、つぎのようなエラーが示されました。
body: {error: "Collection 'heroes' id type is non-numeric or unknown. Can only generate numeric ids."}
図003■番号とテキストが空の項目
データの配列が空になって、プロパティidをもつオブジェクトがなくなると、新たな番号はつくれず、データも加えられないようです。
HttpClient.put()メソッドを使えば、データにid番号を定めて追加できます。リストが空のときは、つぎのようにidは初期値にしてHttpClient.put()メソッドでデータを送ればよいでしょう。
export class HeroService {
// addHero(hero: Hero): Observable<Hero> {
addHero(hero: Hero, numHeros: number): Observable<Hero> {
let heroOvserbable;
// return this.http.post<Hero>(this.herosUrl, hero, httpOptions)
if (numHeros === 0) {
hero.id = 11;
heroOvserbable = this.http.put(this.herosUrl, hero, httpOptions)
} else {
heroOvserbable = this.http.post<Hero>(this.herosUrl, hero, httpOptions);
}
return heroOvserbable
}
}
ただし、サービスのクラス(HeroService)はデータの配列を知りません。ですから、リスト表示クラス(HerosComponent)がデータ追加(add()メソッド)のためにサービス(HeroService)のメソッド(addHero())を呼び出すとき、第2引数としてデータ(heros)の長さ(Array.lengthプロパティ)を渡します。
export class HerosComponent implements OnInit {
add(name: string): void {
// this.heroService.addHero({name} as Hero)
this.heroService.addHero({name} as Hero, this.heros.length)
}
}
これで、リストを空にしても新たな項目が加えられます。これらの手直しをした作例は「Angular Example - Tour of Heroes: Part 6 revised」に掲げました。
Angular in-memory-web-apiモジュールのメソッドをオーバーライドする
リストを空にすると新たな項目がつくれないのは、Angular in-memory-web-api moduleの仕様にもとづくようです。デフォルトのid番号を返すBackendService.genIdDefault()メソッドは、BackendService.isCollectionIdNumeric()メソッドで、リストのデータがあり、さらに数値のidプロパティをもつかどうか確かめます。そうでなければ、デフォルトのid番号はできず、エラーになるのです。
データにid番号を振るのはBackendService.genId()メソッドです。このメソッドは、InMemoryDataServiceクラス(in-memory-data.service)でオーバーライドできます(「Tutorial example has a problem to enter new item into an empty list」参照)。すると、前項のようにサービス(HeroService)やリスト表示(HerosComponent)のクラスは書き替えずに済むのです。
InMemoryDataServiceクラスに定めてオーバーライドするつぎのgenId()メソッドは、データがあればid番号の最大値 + 1、なければ初期値を返します。この作例は"Angular Example - Tour of Heroes: Part 6"に掲げられています。
export class InMemoryDataService implements InMemoryDbService {
genId(heroines: Heroine[]): number {
return heroines.length > 0 ? Math.max(...heroines.map(heroine => heroine.id)) + 1 : 11;
}
}
おまけ
細かいところで、もうひとつつけ加えておきます。サービスのクラス(HeroService)の検索メソッド(searchHeroes())で、URLを直書きしているところです。もとのパスはプロパティ(heroesUrl)に定めてあります。後あとの修正も考えるなら、プロパティを用いるべきでしょう。
export class HeroService {
searchHeroes(term: string): Observable<Hero[]> {
const url = `${this.heroesUrl}/?name=${term}`;
// return this.http.get<Hero[]>(`api/heroes/?name=${term}`)
return this.http.get<Hero[]>(url)
}
}