title: Async pipe does not fill object data into template
body: <p>Can anyone help me see if there is a syntax error here in my template? It does not give error, but does not fill in data into the template either:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngIf=&quot;(hero | async)&quot;&gt;
    &lt;h2&gt;{{hero}}&lt;/h2&gt;
    &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
    &lt;div&gt;
      &lt;label&gt;_id: &lt;/label&gt;{{hero._id}}&lt;/div&gt;
    &lt;div&gt;
      &lt;label&gt;name: &lt;/label&gt;
      &lt;input [(ngModel)]=&quot;hero.name&quot; placeholder=&quot;name&quot; /&gt;
    &lt;/div&gt;
    &lt;button (click)=&quot;goBack()&quot;&gt;Back&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Component code</p>
  <pre class="lang-js prettyprint-override"><code>export class HeroDetailComponent implements OnInit {
      errorMessage: string;
         
      @Input() hero: Observable&lt;Hero&gt;;
          
      constructor(
          private _heroService: HeroService,
          private _routeParams: RouteParams
      ) {}
         
      ngOnInit() {
          let _id = +this._routeParams.get('_id');
          this._heroService.loadHero(_id);
          this.hero = this._heroService.hero$;
          this.hero.subscribe(data =&gt; 
             console.log(data)
          );
      }
  }
  </code></pre>
  <p>The <code>console.log(data)</code> prints:</p>
  <blockquote>
  <p>Object {_id: 11, name: &quot;Mr. Nice&quot;}</p>
  </blockquote>
  <p>which means that the data is correctly retrieved.</p>
  <p>The <code>&lt;div&gt;</code> block also shows up, which mean <code>*ngIf</code> sees the object as non-empty.</p>
  <p><code>&lt;h2&gt;{{hero}}&lt;/h2&gt;</code> shows <code>[object Object]</code>.</p>
  <p>But why the <code>{{hero.name}}</code> is not showing?</p>