Question

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

此操作失败，Chrome控制台返回错误，显示应用无法找到HTML中的任何映射字段

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]

我已经完成的调试指向了observable中的response.json（）无法正确映射到IR注册 - 我似乎无法找到正确的语法？

Answer 1

代码看起来很好，我认为问题是你在使用之前没有初始化myobject: IRegistration;。

doc for lifecycle hook ngOnInit()说：

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

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

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

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

1 个答案: