首页 文章

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

提问于
浏览 次
0

我有以下界面;

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

在subscribe方法中，我在控制台中看到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

3 回答

  • 0

    您还可以在成功订阅中调用函数，以便处理地址 .

    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;
   //...
}
    回复于
  • 0

    所以问题在于你打电话的时候

    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:[]
      }
   }

    如果需要，在加载时使用空输入在服务调用之外初始化它 .

    回复于
  • 0

    我解决了实施路由解析器的问题 . 我错过了角度基本面:-(

    回复于

相关问题