Recently updated.
Currently, I am working through an Angular2 tutorial which can be found at this link
Highlighted below is the code snippet for calling the HeroService from heroes.component.ts,
Heroes.component.ts
import { Component , OnInit } from '@angular/core';
import { Hero } from './hero';
import { HeroService } from './hero.service';
@Component({
selector: 'my-heroes',
template: `
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul> `,
})
export class HeroesComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private heroService : HeroService ){
}
getHeroes(): void{
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
ngOnInit(): void{
this.getHeroes();
}
}
The following block of code contains the getHeroes() call defined in HeroService
HeroService.ts
import { Injectable } from '@angular/core';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
@Injectable()
export class HeroService{
getHeroes() {
return Promise.resolve(HEROES);
}
}
Upon compilation, I encountered the following error message :
Error TS2322: Type 'Promise' is not assignable to type 'Hero[]'. Property 'length' is missing in type 'Promise'.
Please advise on how to resolve this issue. Thank you.