Question

在使用严格静态内容玩弄Angular 2后，我冒险进入HTTP / Observable土地，看看它是什么来的。 Obpectables是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

Angular 2 - 使用Observable时未加载模型类？

1 个答案: