I'm currently working on the "Tour of Heroes" tutorial, but I've encountered an error that I can't seem to resolve.
src/app/app.component.html:3:25 - error TS2339: Property 'hero' does not exist on type 'AppComponent'.
3 <div><span>Id: </span>{{hero.id}}</div>
~~~~
src/app/app.component.ts:7:16
7 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.
Below is the code for app.component.html:
<h1>{{title}}</h1>
<div><span>Id: </span>{{hero.id}}</div>
<div><span>Name: </span>{{hero.name}}</div>
And here is the code for heroes.component.ts:
import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
hero: Hero = {
id: 1,
name: 'Windstorm',
}
constructor() { }
ngOnInit(): void {
}
}