我有一个组件向我的服务请求一个 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 的渲染时间。
最佳答案
您的 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
我通常通过以下方式处理服务中的错误
关于angular - Observable 与模板中的异步管道不适用于单个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39296948/