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。

为了在运行ning npm run build like change:

时没有错误，我不得不对源代码做一些小改动

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

至

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

等在我做了这些小改动之后，我成功地构建了它，然后运行和 npm run electron

问题来了；视图中没有真正显示任何内容，我不知道为什么不显示。如果我通过将 win.openDevTools(); 添加到 main.js 激活 Chrome DevTools 我可以打开控制台并看到 class 应用程序的构造函数打印 "completed" 到控制台，所以看起来一切都在后台进行，但由于某种原因，视图中没有显示任何内容。

如果我改变

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-data（新闻）并将它们显示在视图中，但我必须先解决这个问题。

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 条目。

Angular 2 通过 HTTP 读取 JSON

Angular 2 read JSON via HTTP

json

http

angularjs

electron