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

Posted 2023-03-13

【中文标题】Angular 2 - 使用 Observable 时未加载模型类？ [复制]

【英文标题】：Angular 2 - model class not loaded when using Observable? [duplicate]

【发布时间】：2016-07-17 07:01:39

【问题描述】：

在使用严格的静态内容玩弄 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://***.com/a/34777339/5751783（尽管我不完全确定 SO 问题是否相关）。

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

提前致谢！

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

【参考方案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

【讨论】：

感谢您的解释！这肯定会解释这个问题 - 我把 <Person[]> 误认为是类型转换，但显然不是！话虽如此，我想我可能需要更多帮助。我尝试添加您在 Plunker 中描述的第二个 map() 操作，但问题仍然存在。它可能不多，但目前不起作用。如果我发现了什么，我会自己调查并再次发表评论。理想情况下，我正在寻找一个包含服务的解决方案，而不是在组件中添加的东西。

不客气！问题仍然存在是什么意思？订阅时是否收到带有 Person 类型实例的数组？

我的错，我仍然有问题，但可能不一样！在服务中添加map() 时，现在会加载文件person.model.ts。在这方面，可以认为原来的问题已经解决了。但是在调用greet() 方法时仍然会引发错误。我篡改了 Plunker 添加断点，到达订阅时得到的数组没有输入。错误是：TypeError: l_person0.greet is not a function，这可能与我们的打字问题有关。

好吧，确实没什么：map() 函数不会改变原始数组。在您的代码示例中，不是 return people;，而是在返回 people.map(...) 时一切正常。再次感谢:)