Response.json() 使用接口绑定到单个对象 - RxJs/Observable 失败

Question

当 RESTful API 返回一个 JSON 数组时，这种情况工作正常 - 但我调用的 Web 方法返回单个 JSON 对象 - 因此代码已转换为映射单个对象从<IRegistration[]> to <IRegistration>一直到堆栈。

此操作失败，Chrome 控制台会返回一条错误消息，显示应用在 HTML 中找不到任一映射字段

该目录

{{myobject.productId}}
{{myobject.productName}}

该 JSON

{
  "productId": 1,
  "productName": "My Field Value"
}

界面

export interface IRegistration {
    productId: number;
    productName: string;
}

可观察的

getRegistration(): Observable<IRegistration> {
    return this._http.get(this._svcURL)
        .map((response: Response) => <IRegistration>response.json())
        .do(data => console.log('ALL: ' + JSON.stringify(data)))
        .catch(this.handleError);
}

客户端组件

myobject: IRegistration;
ngOnInit(): void {
    this._registrationService.getRegistration().subscribe(
        reg => this.myobject= reg,
        error => this.errorMessage = <any>error
    );
}

错误

 EXCEPTION: TypeError: Cannot read property 'productId' of undefined in [
{{myobject.productId}}
{{myobject.productName}}
 in SearchComponent@0:0]

我所做的调试指向可观察项中的 response.json(( 无法正确映射到 IRegistration - 我似乎找不到正确的语法？

Answer 1

代码看起来不错，我认为问题是您在使用它之前没有初始化myobject: IRegistration;。

生命周期钩子ngOnInit()的文档说：

在 Angular 首先显示数据绑定属性并设置指令/组件的输入属性后初始化指令/组件。

数据在 HTTP 调用返回任何结果之前显示，因此当 Angular 尝试渲染它时myobject未定义。

可以使用?忽略未定义的属性(如 {{ myobject?.productId }}(或先初始化属性myobject: IRegistration = <IRegistration>{};。