.subscribe 方法中的 this.heroes 在 Angular 的英雄教程中指的是什么？

Question

因此，关于教程本身内部的这行特定代码并没有多说：

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

}

据我所见，.subscribe 从 hero.service 方法中检索“HEROES”，并将其传递给 .subscribe 方法中的 heros 参数。

这至少是我认为正在发生的事情。一些特殊性，如果我这样 console.log：

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

}

我得到一个未定义的“this.heroes”

但是，如果我这样 console.log：

.subscribe(heroes => console.log(this.heroes = heroes))

我得到了它正在调用的数组的输出：

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 11, name: "Dr Nice"}
1: {id: 12, name: "Narco"}
2: {id: 13, name: "Bombasto"}
3: {id: 14, name: "Celeritas"}
4: {id: 15, name: "Magneta"}
5: {id: 16, name: "RubberMan"}
6: {id: 17, name: "Dynama"}
7: {id: 18, name: "Dr IQ"}
8: {id: 19, name: "Magma"}
9: {id: 20, name: "Tornado"}

更奇怪的是，如果我在 .subscribe 方法之外 console.log this.heroes，我也会得到一个英雄列表，如下所示：

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes),
      console.log(this.heroes) ;

}

哪个输出：

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 11, name: "Dr Nice"}
1: {id: 12, name: "Narco"}
2: {id: 13, name: "Bombasto"}
3: {id: 14, name: "Celeritas"}
4: {id: 15, name: "Magneta"}
5: {id: 16, name: "RubberMan"}
6: {id: 17, name: "Dynama"}
7: {id: 18, name: "Dr IQ"}
8: {id: 19, name: "Magma"}
9: {id: 20, name: "Tornado"}

所以我的问题是，订阅方法中的英雄发生了什么？它是从服务返回列表，然后将其传递给 subscribe 方法中的 heros 参数吗？

如需进一步参考我在教程中的位置：https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent

还要补充一点，我以为“英雄”在代码中被设置为 heros:Hero[] 数组，但事实并非如此：

import { Component, OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  heroes: Hero[];

selectedHero: Hero;

onSelect(hero: Hero): void {
  this.selectedHero = hero;
}

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes),
      console.log(this.heroes) ;

}




  constructor(private heroService : HeroService) {



   }

  ngOnInit() { 
    this.getHeroes();
  }

}

如果我删除

heroes: Hero[];

从 heros.component 内部，我仍然得到一个要显示的英雄列表。所以 this.heroes 不绑定英雄：Hero[]

实时示例：https://stackblitz.com/angular/aaldojlqqlvd?file=src%2Fapp%2Fheroes%2Fheroes.component.ts

Answer 1

查看整个heroes.component.ts 很重要，因为您可以看到顶部定义了一个名为heroes 的数组。所以该函数所做的就是将组件中定义的heroes 数组设置为服务返回的heroes 数组。有了新名字，它可能是这样的：

    import { Component, OnInit } from '@angular/core';

    import { Hero } from '../hero';
    import { HeroService } from '../hero.service';

    @Component({
      selector: 'app-heroes',
      templateUrl: './heroes.component.html',
      styleUrls: ['./heroes.component.css']
    })
    export class HeroesComponent implements OnInit {

      selectedHero: Hero;

      heroesInComponent: Hero[]; // <<<< changed

      constructor(private heroService: HeroService) { }

      ngOnInit() {
        this.getHeroes();
      }

      onSelect(hero: Hero): void {
        this.selectedHero = hero;
      }

      getHeroes(): void {
        this.heroService.getHeroes()
            .subscribe(heroesFromService=> this.heroesInComponent = heroesFromService); // <<<< changed
      }
    }

您的 sn-p 记录未定义的原因是因为 heroesInComponent 仍然未定义，因为您尚未为其分配值（例如 heroesFromService）

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

这个sn-p之所以记录正确的结果是因为=（赋值）操作符在赋值后返回了结果数组。

.subscribe(heroes => console.log(this.heroesInComponent = heroesFromService))