Question

我正在与Udemy班一起学习英雄应用程序，以了解Angular的开发。我是这个生态系统的新手，但我觉得直到第6步：可观察的数据，我都掌握了它。 https://angular.io/tutorial/toh-pt4#observable-data

我认为我理解了这个概念，但可观察对象就像是承诺的流，可以在应用程序的不同位置多次解析它们。

下面是我的hero.service.ts代码。我没有可观察到的内容进行了第6步和第7步，并且可以正常工作，但是我无法使可观察部分正常工作。

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：类型'Subscription'不能分配给类型'Hero []'。订阅类型中缺少属性“包含”。

哪个提示我研究组件文件，但是代码与示例中的内容一致，所以我看不到问题出在哪里。谁能让我知道怎么了？

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();
  }
}

Answer 1

此行是错误的。

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

应该是：

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

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

Angular-6 Tour of Heroes可观察的实现（第6步）错误

1 个答案: