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也能在明细页面里显示了：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular应用一个创建场景的问题分析相关推荐

OPenGL笔记--创建一个3D场景
文章目录一.前言二.效果展示三.详细流程 3.1.World.txt文件规则 3.2.加载World.txt 3.3.绘制场景 3.4.交互四.详细代码五.举一反三一.前言通过前面的学习 ...
【淡墨Unity3D Shader计划】一间创建一个游戏场景 amp; 第一Shader写作
本系列文章由@浅墨_毛星云出品.转载请注明出处. 文章链接: http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨) ...
vue react angular 分别如何创建一个新项目
前提,这三个框架都需要依赖node.js 环境,并且node.js 包含npm环境 Vue: (vue-cli 3之前的版本) 1. 全局安装vue-cli 和 webpack npm install ...
第一个cocos2d程序的代码分析
原博地址:第一个cocos2d程序的代码分析在第一讲中已经新建了第一个cocos2d程序,运行效果如下: 在这讲中我们来分析下里面的代码,了解cocos2d的工作原理,看看屏幕上的这个"H ...
二次开发：flowable审批流程实践与创建流程源码分析
二次开发:flowable审批流程实践与创建流程源码分析上一篇已经描述了基于开源项目https://doc.iocoder.cn/的flowable的快速开发,创建了一个租户,创建了用户和相应的岗位 ...
SAP WM 2-Step Picking流程里创建的Group的分析
SAP WM 2-Step Picking流程里创建的Group的分析 SAP WM模块的2-Step Picking流程里,需要根据实际业务情况,首先为外向交货单(Outbound Delivery ...
Angular中怎样创建service服务来实现组件之间调用公共方法
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
一个感染型木马病毒分析（二）
作者:龙飞雪 0x1序言前面已经对感染型木马病毒resvr.exe的病毒行为进行了具体的分析见一个感染型木马病毒分析(一),但是觉得还不够,不把这个感染型木马病毒的行为的亮点进行分析一下就有点遗憾了 ...
angular2创建应用_如何使用Angular和SQLite3创建Electron应用程序。
angular2创建应用 by William Boxx 威廉·博克斯(William Boxx) 如何使用Angular和SQLite3创建Electron应用程序. (How to create ...

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

Angular应用一个创建场景的问题分析相关推荐

最新文章

热门文章