After beginning my journey into learning Angular 2 with a basic understanding of typescript, I encountered an issue while trying to construct code using the constructor. The VS Code editor displayed a type error and I was unable to obtain the expected output in the browser. Below is the code I am working with, along with screenshots for reference. I would greatly appreciate any guidance on how to convert the Object within the Array to a string in the typescript constructor.
Shown below is the code snippet:
import { Component } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title: string;
heroes: Array<Hero>;
myHero: string;
constructor() {
this.title = "Tour Of Heroes";
this.heroes = [
new Hero(1, 'Windstorm'),
new Hero(13, 'Bombasto'),
new Hero(15, 'Magneta'),
new Hero(20, 'Tornado')
];
this.myHero = this.heroes[0];
}
}
Here is the code provided by the author (copied from comment):
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<p>Heroes:</p>
<ul>
<li *ngFor="let hero of heroes"> {{ hero }} </li>
</ul>