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

Question

我有一个组件，它向我的服务请求一个可观察的对象（即，底层http.get返回一个对象）。

在我的模板中，对象（可观察对象）与异步管道一起使用。不幸的是，我得到了一个错误：

无法读取null的属性“lastname”

这件事让我伤了脑筋。类似类型的代码可以正确处理对象列表（与*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是/返回管道中的空对象值。我已经检查了我是否真的从我的服务中得到了一个非空的可观察对象，并且我可以确认存在一个从我的服务返回的（底层）对象。

当然，我可以在从服务中检索到可观察性之后在组件中订阅可观察性，但是我真的很想使用异步构造。

顺便说一下，另一个问题：是否已经有了如何处理异步管道中出现的错误的模式？（使用异步管道的缺点......错误会延迟到视图的渲染时间。

Answer 1

请试着换线

person:Observable< Person>

进入

person:Observable< any>;

如果这不起作用，请打印出这个{{person | async | json}，当然，请使用上面的更改，看看您得到了什么。

Answer 2

您不需要订阅ngOnInit中可观察到的路由数据。

您可以将路由数据与personService observable链接到一个新的observable中，而不是在每次路由数据observable发出时订阅并创建一个全新的observable。这是函数式编程的本质：

函数反应式编程的本质是在声明时完全指定值的动态行为。

记住这一点，您可以在声明时声明关于“人”的所有信息：

person: Observable<Person> = this.route.params.pipe(
  map(params => params.id),
  mergeMap(persId => this.personService.getPerson(persId)),
);

这样做有多种好处：

• 直到有东西订阅它（比如异步管道），才真正触发可观察对象。这意味着，除非您在模板中使用异步管道，否则它不会向此人发出请求。

话虽如此，异步管道仍然可以默认为null，您可以在模板中使用ngIF来处理它：

 <li *ngIf="(person | async) as person">{{person.lastname}}</li>

Answer 3

第一次呈现视图时，未定义person，因为该组件属性仅在触发route params订阅时异步创建。您首先需要创建一个空的可观察对象。而不是

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

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

1. 返回一个空的可观察的
2. 将错误报告给某个应用范围内的（单例）服务。然后，某个（单例）组件在页面的某个地方显示这些错误（如果合适）。