How to convert an array object to a string in typescript constructor?

Question

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>

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
– Igor, Commented Oct 4, 2016 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> — Laxmi Chaitanya Kumar K.
– Laxmi Chaitanya Kumar K., Commented Oct 4, 2016 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
– Igor, Commented Oct 4, 2016 at 15:15
Thank you @Igor for suggesting the edit feature. Just now I found it. — Laxmi Chaitanya Kumar K.
– Laxmi Chaitanya Kumar K., Commented Oct 4, 2016 at 15:31

Igor · Accepted Answer · 2016-10-04 15:13:30Z

2

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>

answered Oct 4, 2016 at 15:13

Igor

62.5k10 gold badges111 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Laxmi Chaitanya Kumar K. Over a year ago

Thank you so much for helping me out.

Igor Over a year ago

@Kumar - glad you got it working and cool you are following the tutorial, the angular2 team did a great job on it. Good luck!

micronyks · Accepted Answer · 2016-10-04 15:22:29Z

1

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>

edited Oct 4, 2016 at 15:22

answered Oct 4, 2016 at 15:06

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

7 Comments

Laxmi Chaitanya Kumar K. Over a year ago

I worked on that previously but unable to get the browser output. The interpolation data binding displays [object Object]

micronyks Over a year ago

[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}}

Laxmi Chaitanya Kumar K. Over a year ago

<h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> <p>Heroes:</p> <ul>   <li *ngFor="let hero of heroes">     {{ hero }}   </li> </ul>

Laxmi Chaitanya Kumar K. Over a year ago

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.

micronyks Over a year ago

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

|

Collectives™ on Stack Overflow

How to convert an array object to a string in typescript constructor?

2 Answers 2

2 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related