title: Observable with Async Pipe in template is not working for single value
body: <p>I have a component that asks my service for an Observable object (that is, the underlying http.get returns one single object).</p>
  <p>The object (an observable) is used in conjunction with an async pipe in my template.
  Unfortunately, I get an error:</p>
  <blockquote>
  <p>Cannot read property 'lastname' of null</p>
  </blockquote>
  <p>I have been breaking my head on this one. A similar type of code works correctly on a list of objects (in conjunction with *ngFor).</p>
  <pre class="lang-html prettyprint-override"><code>&lt;li&gt;{{(person | async)?.lastname}}&lt;/li&gt;
  </code></pre>
  <p>Method in my service:</p>
  <pre class="lang-js prettyprint-override"><code>getPerson(id: string): Observable&lt;Person&gt; {        
     let url = this.personsUrl + &quot;/&quot; + id;
     return this.http.get(url, {headers: new Headers({'Accept':'application/json'})})
                .map(r =&gt; r.json())
                .catch(this.handleError); //error handler
  }
  </code></pre>
  <p>In my component:</p>
  <pre class="lang-js prettyprint-override"><code>//... imports omitted
  
  @Component({
    moduleId: module.id,
    selector: 'app-details-person',
    templateUrl: 'details-person.component.html',
    styleUrls: ['details-person.component.css'],
  })
  export class DetailsPersonComponent implements OnInit, OnDestroy 
  {
     person: Observable&lt;Person&gt;;
     sub: Subscription;
  
     constructor(private personService: PersonService, private route: ActivatedRoute) {
     }
  
    ngOnInit() {
       this.sub = this.route.params.subscribe(params =&gt; {
                   let persId = params['id'];
                   this.person = this.personService.getPerson(persId);
                  });
    }
  
    ngOnDestroy(): void {
       this.sub.unsubscribe();
    }
  }
  
  </code></pre>
  <p>Apparently the observable is/returns a null object value in the pipe.
  I have checked if I am really getting a nonempty Observable from my service and I can confirm that there exists an (underlying) object returned from my service.</p>
  <p>Of course, I could subscribe to the observable in my component after having retrieved the Observable from the service, but I would really like to use the async construct.</p>
  <p>Btw, another question: Is there already a pattern on how to handle errors that occur in the async pipe? (A downside of using async pipes.... errors are delayed until rendering time of the view.</p>