[Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法

最近在学习入门Angular JS，学习资源是https://angular.cn/tutorial，

在学习到 “https://angular.cn/tutorial/toh-pt6模拟数据服务器” 阶段时，客户端访问http://localhost:4200/无法get到英雄列表，Message系统记录日志如下：

HeroService: getHeroes failed: undefined

可能是以下两个原因：

1. angular-in-memory-web-api未正常启动，模拟数据服务器未正常提供数据服务。

2. 其他原因，需要对Angular JS进行断点调试。

在CreateDb函数内部打断点，应用启动的过程中，断点被激活，进入CreateDb内部一步步执行代码，并对照教程中的代码，发现CreateDb的return语句代码敲错了。

教程中的正确代码为：

  createDb(){const heroes = [{ id: 11, name: 'Dr Nice' },{ id: 12, name: 'Narco' },{ id: 13, name: 'Bombasto' },{ id: 14, name: 'Celeritas' },{ id: 15, name: 'Magneta' },{ id: 16, name: 'RubberMan' },{ id: 17, name: 'Dynama' },{ id: 18, name: 'Dr IQ' },{ id: 19, name: 'Magma' },{ id: 20, name: 'Tornado' }];return {heroes};}

而我敲错的代码为：

  createDb(){const heroes = [{ id: 11, name: 'Dr Nice' },{ id: 12, name: 'Narco' },{ id: 13, name: 'Bombasto' },{ id: 14, name: 'Celeritas' },{ id: 15, name: 'Magneta' },{ id: 16, name: 'RubberMan' },{ id: 17, name: 'Dynama' },{ id: 18, name: 'Dr IQ' },{ id: 19, name: 'Magma' },{ id: 20, name: 'Tornado' }];return heroes;}

把 return heroes 改为 return {heroes}

程序再次正常运行，英雄列表正常加载。

export class InMemoryDataService implements InMemoryDbService {

createDb(){

const heroes = [

{ id: 11, name: 'Dr Nice' },

{ id: 12, name: 'Narco' },

{ id: 13, name: 'Bombasto' },

{ id: 14, name: 'Celeritas' },

{ id: 15, name: 'Magneta' },

{ id: 16, name: 'RubberMan' },

{ id: 17, name: 'Dynama' },

{ id: 18, name: 'Dr IQ' },

{ id: 19, name: 'Magma' },

{ id: 20, name: 'Tornado' }

];

return {heroes};

}

转载于:https://www.cnblogs.com/sinodragon21/p/11007610.html

[Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法相关推荐

JS之经典for循环闭包问题解决方法
JS之经典for循环闭包问题解决方法参考文章: (1)JS之经典for循环闭包问题解决方法 (2)https://www.cnblogs.com/zhumingyong/p/8994636.html ...
不支持图形化界面的Linux系统如何显示图像化界面？飞腾服务器显示图像化界面方法，DISPLAY environment variable is undefined问题解决方法
我用的本地 windows 环境访问的飞腾服务器,这个服务器里的系统是不支持图像化界面的,需要通过 display 指定自己的电脑来显示图像化界面. 命令如下,这个 ip 是对应自己电脑的,通过 ip ...
Angular学习教程-英雄之旅
Angular学习教程-英雄之旅官网链接 https://angular.cn/tutorial 文章目录 Angular学习教程-英雄之旅一.能学习到二.创建项目三.英雄编辑器 Part1 ...
Angular.js为什么如此火呢？
AngularJS学习列表:七步走 Angular.js 从菜鸟到专家 (系列列表) 上一篇之后,Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM ...
用Typescript如火如荼地进行angular.js
目录介绍设置环境将指令翻译成惯用的Typescript 翻译服务翻译值提供者翻译控制器使tsconfig.json更严格离开angular.js边界结论本文介绍如何迁移旧的angul ...
angular.js phonecat翻译
AngularJS 手机目录应用教程概述这个应用将带领开发者贯穿使用angularjs来开发一个web-app程序.这个应用程序是基于 Google Phone Gallery 但它现在已经不存在 ...
angular.js前端和后台的数据交换，后台取不到值对应方案
2019独角兽企业重金招聘Python工程师标准>>> 环境:angular.js+sastruts+apache-tomcat 最近在学习前端的一个设计工具angular.js,数 ...
史上最全的Angular.js 的学习资源
Angular.js 的一些学习资源基础官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...
10+ 最佳的 Node.js 教程和实例
如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi ...

[Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法

[Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法相关推荐

最新文章

热门文章