[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