«Observable <Hero []>» нельзя назначить типу «Hero []» - PullRequest
Новая
       9

«Observable <Hero []>» нельзя назначить типу «Hero []»

0 голосов
/ 07 мая 2018

Я следую учебнику Angular по Tour of Heroes и сейчас пытаюсь интегрировать наблюдаемые в мой проект. После изменения файла hero.service.ts, чтобы он выглядел следующим образом 

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';

@Injectable()
export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }
}

Я не получаю следующую ошибку

ОШИБКА в src / app / heroes / heroes.component.ts (27,5): ошибка TS2322: тип «Observable» нельзя назначить типу «Hero []». Имущество «include» отсутствует в типе «Observable».

Я не совсем уверен, что я здесь делаю неправильно. На самом деле у меня нет свойства «include» в определении моего героя. Этот класс выглядит так 

export class Hero {
    id: number;
    name: string;
}

Вот ссылка на мой проект , хотя я не могу запустить его в стеке blitz

Я перечислю полный код здесь

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) { }

  selectedHero: Hero;

  heroes: Hero[];

  ngOnInit() {
    this.getHeroes();
  }

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

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




}

hero.service.ts 

import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';

@Injectable()
export class HeroService {

  constructor() { }

  getHeroes(): Observable<Hero[]> {
    return of(HEROES);
  }
}

hero.ts 

export class Hero {
    id: number;
    name: string;
}

макет heroes.ts 

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

1 Ответ

0 голосов
/ 07 мая 2018

Это проблема: 

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

Как говорит ошибка, this.heroes имеет тип Hero[] (следовательно, массив Hero элементов), в то время как this.heroService.getHeroes(); возвращает наблюдаемую , которая имеет тип Observable<Hero[]>.

Поскольку вы работаете с наблюдаемой, вы должны правильно подписаться на нее, например: 

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