Angular 2 - Typescript - Rx - 接口成员未定义答案

【问题标题】：Angular 2 - Typescript - Rx - Interface member undefinedAngular 2 - Typescript - Rx - 接口成员未定义
【发布时间】：2018-02-28 21:43:05
【问题描述】：

我有下面的界面；

  export interface IDetail {
  name: string;
  office: string;
  addresses: Address[];
  }

  interface Address{
    street: string;
    zip: number;
  }

我的服务方式，

 getDetails(id: number): Observable<IDetail> {
 return this._http.get(this._apiUrl+ "/" + id)
  .map((response: Response) => <IDetail>response.json())
  .catch(this.handleError);

关于组件的ngOnInit方法，

ngOnInit(): void {
    this.getDetailsService(id)
    .subscribe(data => {
        this.detail = data;
        console.log(this.detail);
        this.AccessAddress();
    },
    error => this.errorMessage = <any>error);
   }

AccessAddress(): void{
//After service call, trying to read addresses member
 let addresses = this.detail.addresses;
}

在订阅方法中，我在控制台中看到了 IDetail 的输出。

服务调用后，当尝试读取地址成员时，我收到以下错误， ERROR TypeError: Cannot read property 'addresses' of undefined

在 html 文件上，我可以访问地址成员并在 UI 上显示。

<div *ngFor="let address of detail.addresses">
   {{address.street}}
</div>

我需要更改接口来上课吗？或者我需要在访问之前初始化地址成员？或其他与 Observable 相关的东西？

【问题讨论】：

标签： angular typescript rxjs angular2-observables

【解决方案1】：

您还可以从成功的订阅中调用一个函数，您可以在其中处理地址。

ngOnInit(): void {
    this.getDetailsService(id)
    .subscribe(data => {
        this.detail = data;
        console.log(this.detail);
        this.processAddresses();
    },
    error => this.errorMessage = <any>error);

}

processAddresses(){
   //Here you can process adderesses 
   let addresses = this.detail.addresses;
   //...
}

【讨论】：

【解决方案2】：

所以问题是当你打电话时

    let addresses = this.detail.addresses;

addresses 未定义，因为您的服务调用尚未返回，因此也未定义详细信息。我建议在您的服务调用中设置代码，并将其初始化为空

   ngOnInit(): void {
    this.getDetailsService(id)
    .subscribe(data => {
        this.detail = data;
        console.log(this.detail);
        let addresses = this.detail.addresses;
       },
       error => this.errorMessage = <any>error);
     detail={
      addresses:[]
      }
   }

如果需要，在加载时使用空输入在服务调用之外对其进行初始化。

【讨论】：

服务调用返回数据，我可以通过console.log(this.detail)看到数据。
它可能正在返回数据，但此时错误很可能已经发生。因此，在记录正在加载的数据时，错误已经发生。 '让地址 = this.detail.addresses;'不是在等待呼叫完成。尝试在'letaddresses = this.detail.addresses;之前记录console.log(this.detail) ' 但在订阅功能之外
我尝试了你的建议并编辑了我原来的问题。
还是同样的错误/api返回什么？您还尝试在其他任何地方访问 this.detail 吗？如果可以，您可以记录吗？
嘿，你还有另一个问题，编辑建议，但你应该确保 detail.addresses 在等式中初始化为

【解决方案3】：

我通过实施路由解析器解决了我的问题。我错过了角度基础:-(

【讨论】：