角度英雄教程 - 路由 - 2017年12月 - 编译错误

时间:2017-12-05 14:42:30

标签: angular typescript

我无法编译我的代码,我已经多次与最终代码审核,复制和编辑进行了比较。粘贴......

https://angular.io/tutorial/toh-pt5

但我仍然得到错误

$ ERROR in C:/Users/pablues/Documents/angular-tutorial/a-t-h/src/app/heroes/heroes.component.ts (21,22): Property 'getHeroes' does not exist on type 'HeroService'. ERROR in C:/Users/pablues/Documents/angular-tutorial/a-t-h/src/app/dashboard/dashboard.component.ts (20,22): Property 'getHeroes' does not exist on type 'HeroService'.

https://github.com/pablues/tour-of-heroes/blob/master/src/app/heroes/heroes.component.ts

https://github.com/pablues/tour-of-heroes/blob/master/src/app/dashboard/dashboard.component.ts

https://github.com/pablues/tour-of-heroes/blob/master/src/app/hero.service.ts

我无法弄明白,问题出在哪里。

提前谢谢

1 个答案:

答案 0 :(得分:0)

我在HeroComponent或DashboardComponent中看不到错误,但HeroDetailComponent中存在一个问题。

以下是您的HeroService

@Injectable()
export class HeroService {

  constructor(private messageService: MessageService) { }

  getHeroes(): Observable<Hero[]> {
    // Todo: send the message _after_ fetching the heroes
    this.messageService.add('HeroService: fetched heroes');
    return of(HEROES);
  }
}

以下是你的HeroDetailComponent

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: [ './hero-detail.component.css' ]
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

  constructor(
    private route: ActivatedRoute,
    private heroService: HeroService,
    private location: Location
  ) {}

  ngOnInit(): void {
    this.getHero();
  }

  getHero(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.heroService.getHero(id)
      .subscribe(hero => this.hero = hero);
  }

  goBack(): void {
    this.location.back();
  }
}
  

以上,您的HeroService中缺少 getHero(id)

this.heroService.getHero(id).subscribe(hero => this.hero = hero);