Async pipe does not fill object data into template

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:

<div *ngIf="(hero | async)">
<h2>{{hero}}</h2>
<h2>{{hero.name}} details!</h2>
<div>
<label>_id: </label>{{hero._id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name" />
</div>
<button (click)="goBack()">Back</button>
</div>


Component code

export class HeroDetailComponent implements OnInit {
errorMessage: string;

@Input() hero: Observable<Hero>;

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 =>
console.log(data)
);
}
}


The console.log(data) prints:

Object {_id: 11, name: "Mr. Nice"}
​

which means that the data is correctly retrieved.

The <div> block also shows up, which mean *ngIf sees the object as non-empty.

<h2>{{hero}}</h2> shows [object Object].

But why the {{hero.name}} is not showing?

Continue reading...