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

Question

我有以下界面；

  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 的输出。

服务调用后，在尝试读取地址成员时出现以下错误， 错误类型错误：无法读取未定义的属性 'addresses'

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

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

我需要将接口更改为 class 吗？或者我需要在访问之前初始化地址成员？还是 Observable 的其他东西？

Answer 1

所以问题是当你调用

    let addresses = this.detail.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:[]
      }
   }

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

Answer 2

您还可以从成功的订阅中调用函数来处理地址。

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;
   //...
}

Answer 3

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

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

Angular 2 - Typescript - Rx - Interface member undefined

rxjs

typescript

angular2-observables

angular