Angular 2 - 使用 Observable 时未加载模型类？ [复制]

Question

在使用严格的静态内容玩弄 Angular 2 之后，我冒险进入 HTTP/Observable 领域，看看会发生什么。 Observables 是 Promises 的一个不错的替代方案——尽管与该替代方案相比，我现在已经失去了它的好处。但是今天下午有一个问题一直困扰着我。

使用 Observables 获取数据时（根据https://angular.io/docs/ts/latest/guide/server-communication.html），似乎未加载与模型对应的类。只要只使用属性，这不是问题，但它会阻止使用可以在该类中定义的方法。

Plunker：http://plnkr.co/edit/WjEfdOHmHWT2RZVDSkjr?p=preview

您可以通过交替使用 App 组件中ngOnInit() 中定义的两条指令来具体化问题：

ngOnInit(){

  // NB
  // Alternate between the two instructions below while checking
  // the 'Network' tab of your devtool of choice.

  // Doing this will actually load the 'person.model.ts' file,
  // and make the methods available to the component and its template
  this.people[0] = new Person();

  // Doing this will NOT load the 'person.model.ts' file, thus
  // causing any call to a method defined in that class to fail.
  //this.getPeople();
}

当使用第一条指令时，person.greet() 方法在模板中通过插值调用时工作正常，并获取相应的文件。但是在使用第二条指令时，会引发错误并记录到控制台。顺便说一下，这个错误出现在我制作的 Plunker 上 - 在我自己的应用程序中遇到问题时，我什么也得不到。

现在有可能绕过这个问题（例如，在订阅开始之前对new Person() 进行虚拟调用），但这确实感觉很笨拙。这里提出了类似的建议：https://stackoverflow.com/a/34777339/5751783（尽管我不完全确定 SO 问题是否相关）。

这是一个真正的问题，还是我做错了什么？如果手头确实存在问题，那么防止它的正确方法是什么？

提前致谢！

免责声明：如果存在实际问题，我不确定它是否与 Angular2、SystemJS、RxJS 或其他幕后使用的组件有关。我将暂时使用标签 angular2（鉴于这就是我在这里的原因），但我会根据答案添加更多（或删除 angular2）。

Answer 1

实际上当你可以将请求的结果发送到Person[]时，它并没有真正转换为Person类型的对象。

要实现这一点，您需要为列表中的每个元素显式实例化 Person 类：

return this.http.get(this._personUrl)
            .map(res => <Person[]> res.json())
            .map(people => {
              return people.map((person) => {
                return new Person(person.firstName, person.surname);
              });
            })
            .catch(this.handleError);

这样你就可以使用Person类的方法了。

查看这个问题了解更多详情：

• How do I cast a JSON object to a typescript class