angular - Observable 与模板中的异步管道不适用于单个值

Question

我有一个组件向我的服务请求一个 Observable 对象(也就是说，底层的 http.get 返回一个单一的对象)。
该对象(一个可观察对象)在我的模板中与异步管道结合使用。
不幸的是，我收到一个错误:

Cannot read property 'lastname' of null

我一直在打破我的头脑。类似类型的代码在对象列表上正常工作(与 *ngFor 结合使用)。

<li>{{(person | async)?.lastname}}</li>

我的服务中的方法:

getPerson(id: string): Observable<Person> {        
   let url = this.personsUrl + "/" + id;
   return this.http.get(url, {headers: new Headers({'Accept':'application/json'})})
              .map(r => r.json())
              .catch(this.handleError); //error handler
}

在我的组件中:

//... 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<Person>;
   sub: Subscription;

   constructor(private personService: PersonService, private route: ActivatedRoute) {
   }

  ngOnInit() {
     this.sub = this.route.params.subscribe(params => {
                 let persId = params['id'];
                 this.person = this.personService.getPerson(persId);
                });
  }

  ngOnDestroy(): void {
     this.sub.unsubscribe();
  }
}

显然，observable 是/返回管道中的空对象值。
我已经检查过我是否真的从我的服务中获得了一个非空的 Observable，我可以确认存在一个从我的服务返回的(底层)对象。
当然，我可以在从服务中检索 Observable 后订阅组件中的 observable，但我真的很想使用 async 构造。
顺便说一句，另一个问题:是否已经有关于如何处理异步管道中发生的错误的模式？ (使用异步管道的缺点......错误会延迟到 View 的渲染时间。

Answer 1

您的 View 第一次呈现时，person未定义，因为该组件属性仅在路由参数订阅触发时异步创建。您需要最初创建一个空的 observable。代替

person:Observable<Person>;

尝试

person = Observable.of<Person>(Person());  // or however you create an empty person object
    // the empty object probably needs a lastname field set to '' or null

我通常通过以下方式处理服务中的错误

返回一个空的 observable

将错误报告给某些应用程序范围的(单例)服务。一些(单个)组件然后在页面上的某处显示这些错误(如果合适)。