Angular 2通过HTTP读取JSON

Question

我是Angular 2和javascript的新手，我试图通过HTTP请求读取一些JSON。我正在学习本教程：https://medium.com/google-developer-experts/angular-2-introduction-to-new-http-module-1278499db2a0

我正在尝试使用 Electron。

运行此示例

我必须对源代码进行一些小的更改，以便在运行npm run build之后不会出现错误：

<my-person *ng-for="#person of people"

到

<my-person *ngFor="let person of people"

等。在我做了这些小修改后，我将其构建为没有错误，然后使用npm run electron

运行

这就是问题所在;视图中没有显示任何内容，我不知道为什么不这样做。如果我通过向main.js添加win.openDevTools();来激活 Chrome DevTools ，我可以让控制台打开并看到类App的构造函数打印到“已完成”到控制台，所以看起来一切都会好转在后台，但由于某种原因，视图中没有任何显示。

如果我改变

export class App {
  people : any;
  constructor(peopleService:PeopleService) {
    peopleService.people
        .subscribe(
            people => this.people = people,
            error => console.error('Error: ' + error),
            () => console.log('completed!')
        );
  }

到

..
() => console.log('this.people')
..

我可以在控制台中看到包含所有三个人的对象，这些人在people.json这样定义

[
  {"id": 1, "name": "Brad"},
  {"id": 2, "name": "Jules"},
  {"id": 3, "name": "Jeff"}
]

您可以在我的GitHub中查看整个项目：https://github.com/MikPak/ngNews

请帮我解决这个问题。 稍后我想从外部服务器获取JSON数据（新闻）并在视图中显示它们，但我必须先解决这个问题。

Answer 1

添加

<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>

到你的app / index.html文件并删除

  'rxjs',
  'reflect-metadata',

来自webpack.config.js文件中的angular2条目。