На что ссылается this.heroes внутри метода .subscribe в англоязычном уроке о героях?

Question

Так что об этой конкретной строке кода внутри самого учебника не так много сказано:

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

}

Из того, что я видел, .subscribe получает "HEROES" из метода hero.service и передает его в параметр heroes внутри метода .subscribe.

Это, по крайней мере, то, что я думаю, происходит. Некоторые особенности, если я 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"}

Еще более странно, если я console.log this.heroes вне метода .subscribe, я получаю список героев, например, так:

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"}

Итак, мой вопрос: что происходит с героями внутри метода подписки? Возвращает ли он список из службы, а затем передает его параметру heroes в методе подписки?

Для дальнейшей ссылки на то, где я нахожусь в учебнике: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent

Еще одна вещь, которую я хотел бы добавить, я думал, что для «героев» в коде указан массив героев: 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[];

изнутри объекта heroes.com, я все еще получаю список героев для отображения. Так что это. Герои не привязаны к героям: герой []

живой пример: 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))