Objects are a bit tricky with the async pipe. With an Observable that contains an array, we can use NgFor and create a local template variable (hero below) that gets assigned each item of the array after the async pipe extracts the array from the Observable. We can then use that variable elsewhere in the template:
<div *ngFor="let hero of heroes | async">
{{hero.name}}
</div>
<!-- we can't use hero here, outside the NgFor div -->
But with an Observable that contains a single object, I’m not aware of any way to create a local template variable that will reference that object. Instead, we need to do something more complicated:
<div>{{(hero | async)?.name}}</div>
And we would need to repeat that for each property of the object we want to display. (The above line assumes that component property hero is an Observable.)
It is probably easier to assign the object (that is inside the Observable, hero$ below) to a property of the component, using component logic:
this._heroService.hero$.subscribe(data => this.hero = data.json());
and then use NgIf or the Elvis/safe navigation operator to display the data in the view:
<div *ngIf="hero">{{hero.name}}</div>
<!-- or -->
<div>{{hero?.name}}</div>