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

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

阅读量：4631 次

发布时间：2019-06-09

本文共 1688 字，大约阅读时间需要 5 分钟。

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

在学习到 “https://angular.cn/tutorial/toh-pt6模拟数据服务器” 阶段时，客户端访问无法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

你可能感兴趣的文章