current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

Recently I started learning Angular 2 with basic knowledge on typescript. So, I tried to work out code using constructor. But I'm getting type error in the VS Code editor and also unable to get the expected output in the browser. I am sharing the code below and attaching the screenshot too. It would be very helpful if anyone tell me how to convert the Object in the Array to a string in the typescript constructor?

Here is the code:

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];
  }
}

Screenshot: VS Code Browser

Author provided code 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>
share|improve this question
    
What value do you want to store in myHero? – Pablo Oct 4 '16 at 15:07
    
You should display a property of Hero not the object itself. As for the array you need to iterate over it and display a property of it. If you want more help then show your template (html) file. – Igor Oct 4 '16 at 15:07
    
<h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> <p>Heroes:</p> <ul> <li *ngFor="let hero of heroes"> {{ hero }} </li> </ul> – Kumar Oct 4 '16 at 15:13
    
@Kumar - see my latest edit underneath, I use your template you provided in your comment. By the way, you should edit your question to provide any requested data instead of providing it in a comment. Use the edit button. – Igor Oct 4 '16 at 15:15
1  
Thank you @Igor for suggesting the edit feature. Just now I found it. – Kumar Oct 4 '16 at 15:31
up vote 1 down vote accepted 
this.myHero = this.heroes[0].name; // display the name

Or if you want to keep your selected hero as an object then display the name in the template.

app.component.html

{{myHero.name}}

As for the array you need to loop over it and display something interesting on the object from the array itself.

<div *ngFor="#hero of heroes">
  {{hero.name}}
</div>

From your comment, here is your fixed code that displays the name of the myHero instance and from loop over the heros array.

<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero.name}}</h2>
<p>Heroes:</p>
<ul> <li *ngFor="let hero of heroes"> {{ hero.name }} </li> </ul>
share|improve this answer
1  
Thank you so much for helping me out. – Kumar Oct 4 '16 at 15:47
    
@Kumar - glad you got it working and cool you are following the tutorial, the angular2 team did a great job on it. Good luck! – Igor Oct 4 '16 at 15:48
up vote 1 down vote

You are assigning Hero class object(s) to string variable which is not compatible. So, rather than changing it to string, declare it with Hero class type. So,

myHero: string;

change it to

myHero: Hero;

And in template use it with property like,

<h1>{{title}}</h1>
   <h2>My favorite hero is: {{myHero.name}}</h2>
      <p>Heroes:</p>
         <ul>
             <li *ngFor="let hero of heroes"> {{ hero.name}} </li>
        </ul>
share|improve this answer
    
I worked on that previously but unable to get the browser output. The interpolation data binding displays [object Object] – Kumar Oct 4 '16 at 15:10
    
[object Object] means it holds some properties. So you should use .property with object like {{object.property}} so use it like---- {{myHero.id}} or {{myHero.name}} – micronyks Oct 4 '16 at 15:11
    
<h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> <p>Heroes:</p> <ul> <li *ngFor="let hero of heroes"> {{ hero }} </li> </ul> – Kumar Oct 4 '16 at 15:14
    
Please take a look at the code written without constructor link. Through this code I'm getting required output without changing the interpolation data binding from {{myHero}} to {{myHero.id}}. Please compare the code with mine and please explain. – Kumar Oct 4 '16 at 15:28
    
What to compare? You need to understand diff between variable and object. variable holds single value and object holds property. {{myHero}} represents a variable which can hold a single value eg. constructor{ this.myHero="windstrom"}. This will display windstrom on the screen. Now if you assing it an object like constructor{this.myHero={id:"1",name:"windstrom"}} then {{myHero}} will display [object Object] so you have to use myHero with property like {{myHero.name}} – micronyks Oct 4 '16 at 15:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.