Angular应用一个创建场景的问题分析

问题描述：在hero Component页面创建hero：

成功创建了一个新的hero，id为21：

然而进入detail页面之后，看不到这个新建的hero：

问题排查：

Hero detail页面，基于的属性是这个加了@Input annotation的hero：

这个属性的赋值是在ngOnInit的getHero方法里，该方法会调用heroService的getHero方法。

进入getHero方法进行调试，发现heroService的getHero方法返回的hero是undefined的：

原因是因为hero service当前的实现只是从mock hero数据里取值，而新建的hero没有加入到这个mock hero数据里：

重新使用http client实现getHero即可：

getHero(id: number): Observable<Hero> {
  const url = `${this.heroesUrl}/${id}`;
  return this.http.get<Hero>(url).pipe(
    tap(_ => this.log(`fetched hero id=${id}`)),
    catchError(this.handleError<Hero>(`getHero id=${id}`))
  );
}

修复之后，这个新建的hero也能在明细页面里显示了：