Question

我无法解决此.subscribe方法内部发生的事情。

 getHeroes(): void {
    this.heroService.getHeroes()
        .subscribe(heroes => this.heroes = heroes);
  }

我一直认为this.heroes = heroes是在英雄组件内部分配给heroes:Hero[]的。事实证明并非如此。如果我将heroes:Hero[]更改为heroes:boolean，或者即使我完全从英雄组件中删除了heroes:Hero[]，我仍然会显示我的英雄。并且this.heroes仍被分配。

有人可以解释这是怎么回事吗？

Here is the live example

尝试做我提到的事情，并删除heroes:Hero[]，然后注意仍然显示英雄。如果没有将this.heroes = heroes分配给heroes:Hero[]，那么subscribe方法内部到底发生了什么？

Answer 1

如果删除heroes属性，则从服务中获取数据时，它将自动在Javascript中创建一个属性并显示它。浏览器运行Javascript代码，因此没有错误。如果您不声明属性或属性的数据类型不正确，则会出现TypeScript编译时错误

Answer 2

我一直以为this.heroes = heroes被分配给heroes组件内部的heroes：Hero []

正确。事实是，那些用红色下划线标出的错误是TypeScript错误。如果TS编译器以某种方式绕过它们并以任何方式构建项目，那么JavaScript就可以快速创建新的对象属性。

但是，生产版本应该会失败。

Answer 3

此处this.heroes = heroes，其中this.heores是在顶部分配的空变量，用于保存从订户（英雄）获取的数据。如果未分配空变量，则在使用this.heores时将引发错误。会抛出错误，例如类型'HeroesComponent'上不存在'Property'heroes'

Answer 4

当您删除p = 1; if (m > a) { p += (m - 1)/a; }时，它仍然会显示，因为它们都可以从TypeScript编译为JavaScript。

为了在一个简单的示例中轻松地看到它，它与以下内容非常相似，将其添加到对象而不先分配它。

heroes: Hero[];

这在JavaScript中很好，这就是为什么仍然显示列表的原因，但这不是有效的TypeScript，将导致编译错误。

如果我将heroes：Hero []更改为heroes：boolean，或者即使我完全从heroes组件中删除了heroes：Hero []，我的英雄仍然会显示。而且这个英雄仍然被分配。

所以这意味着它会显示，因为一旦您在订阅中定义它，它就会被添加到类中。

有效的JavaScript，是的。

有效的TypeScript，编号

This documentation可能有助于突出一些差异

Angular Tour of Heroes的这种订阅方法内部发生了什么？

4 个答案: