Angular 2-打字稿-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的輸出。

服務呼叫后，當嘗試讀取地址成員時，我得到以下錯誤， 錯誤TypeError：無法讀取未定義的屬性“地址”

在html文件上，我可以訪問地址成員並在UI上顯示。

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

我需要更改接口才能上課嗎？ 還是我需要在訪問之前初始化地址成員？ 或其他可觀察的東西？

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

我解決了與實施路由解析器有關的問題。 我錯過了棱角分明的基本原理:-(