Angular-6 Tour of Heroes Observable 实现（第 6 步）错误答案

【问题标题】：Angular-6 Tour of Heroes Observable implementation (Step 6) bugAngular-6 Tour of Heroes Observable 实现（第 6 步）错误
【发布时间】：2018-12-25 12:11:28
【问题描述】：

我正在与 Udemy 课程一起完成英雄之旅应用程序，以了解 Angular 开发。我是这个生态系统的新手，但在第 6 步：可观察数据之前，我感觉自己已经掌握了窍门。 https://angular.io/tutorial/toh-pt4#observable-data

我想我明白了这个概念，但 observables 就像一个承诺流，它们可以在应用程序的不同位置多次解析。

下面是我的 hero.service.ts 代码。我在没有 observables 的情况下完成了第 6 步和第 7 步，并且能够正常工作，但我无法让 observable 部分工作。

import { Injectable } from '@angular/core';
import {Observable, of} from 'rxjs';
import {Hero} from './hero';
import {HEROES} from './heroes-list'
import {MessageService} from './message.service'

@Injectable({
  providedIn: 'root'
})
export class HeroService {

  constructor(private messageService: MessageService) { }
  // Non-observable synchronous code, uncommenting and running with the 
 //observable code commented works fine
 //  getHeroes() :Hero[]{
 //         this.messageService.add('HeroService: fetched heroes');
 //        return HEROES;
 // }
 // getHero(id: number) :Hero{
 //   this.messageService.add(`HeroService: Fetched hero id:${id}`);
 //   return HEROES.find(hero => hero.id === id);
 // }
  /*Observable bug */
  getHeroes() :Observable<Hero[]>{
        this.messageService.add('HeroService: fetched heroes');
        return of(HEROES);
  }
  getHero(id: number) :Observable<Hero>{
    this.messageService.add(`HeroService: Fetched hero id:${id}`);
    return of(HEROES.find(hero => hero.id === id));
  }

}

我得到的错误如下：

src/app/heroes/heroes.component.ts(26,5) 中的错误：错误 TS2322：类型“订阅”不可分配给类型“英雄 []”。 “订阅”类型中缺少属性“包含”。

这提示我调查组件文件，但代码与示例中的内容一致，所以我看不出问题出在哪里。谁能让我知道出了什么问题？

heroes.component.ts

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 {
  constructor(private heroService: HeroService) { }

 //  hero = {
 //        id:1,
 //        name: "Deku",
 //        power: "One For All",
 //        origin: "My Hero Academica"
 // }
 heroesList :Hero[];
 clickedHero:Hero;
 // onClick(hero: Hero): void{
 //       this.clickedHero = hero;
 // }
  getHeroes(): void {
        // this.heroesList = this.heroService.getHeroes()
        // Cannot subscribe for some reason
    this.heroesList = this.heroService.getHeroes().subscribe(heroes => this.heroesList = heroes);
  }
  ngOnInit() {
        this.getHeroes();
  }
}

【问题讨论】：

删除this.heroesList = 。英雄列表在传递给 subscribe() 的回调中初始化。而且，正如消息所示，subscribe() 返回一个订阅。所以用 Subscription 初始化一个数组是没有意义的。就像，有一个承诺，你会做promise.then(array => this.heroes = array);。不是this.heroes = promise.then(array => this.heroes = array);
啊，我明白了，订阅有点像 observable 的通知类型，上面写着“当请求 a 完成时，执行 b”。在 b 内部是我有我请求的数据并可以分配它的地方。 Promise 很难学习，但 observables 是另一种野兽。

标签： angular

【解决方案1】：

这条线是错误的。

this.heroesList = this.heroService.getHeroes().subscribe(heroes => this.heroesList = heroes);

应该是：

this.heroService.getHeroes().subscribe(heroes => this.heroesList = heroes);

在您已经分配给本地英雄列表的订阅块中

【讨论】：