Question

在本教程本身中，关于此特定代码行的说法不多：

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

}

从我所见，.subscribe从hero.service方法中检索“ HEROES”，并将其传递到.subscribe方法内部的heroes参数中。

这至少是我认为正在发生的事情。如果我使用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方法中的英雄发生了什么？是从服务中返回列表，然后将其传递给订阅方法内部的heroes参数吗？

有关我在本教程中的位置的详细信息，请参见：https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent

要添加的另一件事是，我认为代码中的heroes：Hero []数组被设置为“ 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 {

  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[];

从heroes.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
      }
    }

您的代码段记录未定义的原因是heroesInComponent仍未定义，因为您尚未为其分配值（例如heroesFromService）

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

此摘要记录正确结果的原因是因为=（赋值）运算符在赋值后返回了结果数组。

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

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

1 个答案: