title: angular 4 observable returns [object Object]
body: <p>I am using Angular 4 as my frontend and Laravel 5.5 as my restful API. the backend seems fine wrt the problem, i can sent curl requests and get back exactly what i expect, a JSON with 2 key-value pairs:</p>
  
  <p><code>[{"id":1,"name":"Mr. Nice"}]</code></p>
  
  <p>When i try and do this with angular i get the following:</p>
  
  <p><code>HERO: [object Object] HERO.ID: HERO.NAME</code></p>
  
  <p>my service (I included a working get request just for reference):</p>
  
  <pre><code>getHeroes(): Observable&lt;Hero[]&gt; {
      return this.http.get&lt;Hero[]&gt;(this.heroesUrl).pipe(
          tap(heroes =&gt; this.log(`fetched heroes, ${this.heroesUrl}`)),
          catchError(this.handleError('getHeroes', []))
      );
  }
  
  /** ISSUE HERE */
  getHero(id: number): Observable&lt;Hero&gt; {
      const url = `${this.heroesUrl}/${id}`;
      return this.http.get&lt;Hero&gt;(url).pipe(
          tap(_ =&gt; this.log(`fetched hero id=${id}, ${url}`)),
          catchError(this.handleError&lt;Hero&gt;(`getHero id=${id}`))
      );
  }
  </code></pre>
  
  <p>the component:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { Location } from '@angular/common';
  import { HeroService }  from '../hero.service';
  import { Hero } from '../hero';
  
  @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 =&gt; this.hero = hero);
      }
  
      goBack(): void {
          this.location.back();
      }
  }
  </code></pre>
  
  <p>the template:</p>
  
  <pre><code>&lt;div *ngIf="hero"&gt;
          &lt;div&gt;HERO: {{ hero }} HERO.ID: {{ hero.id }} HERO.NAME {{ hero.name }}&lt;/div&gt;
          &lt;h2&gt;{{hero.name | uppercase}} Details&lt;/h2&gt;
          &lt;div&gt;&lt;span&gt;id: &lt;/span&gt;{{hero.id}}&lt;/div&gt;
          &lt;div&gt;
                  &lt;label&gt;name:
                          &lt;input [(ngModel)]="hero.name" placeholder="name"&gt;
                  &lt;/label&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button (click)="goBack()"&gt;go back&lt;/button&gt;
  </code></pre>
  
  <p>the class:</p>
  
  <pre><code>export class Hero {
      id: number;
      name: string;
  }
  </code></pre>
  
  <p>From what i can tell for some reason angular is not recognizing the json as a single instance of the class Hero, the <code>*ngIf=</code> in the template does get triggered. the <code>getHeroes</code> function in the service works, it returns a multiple entries and i loop through them in the template, is there something fairly obvious that i am missing?</p>
  
  <p>I am fairly new to angular so any help would be appreciated.</p>
  
  <p>Thanks.</p>