變量不能分配從訂閱方法

Question

在本身顯示值的方法，但外面它顯示未定義消息

Ubigeo.service.ts

lisProvinciaByDepartamento(ubigeoId: string): Observable<Ubigeo[]> { 
    let ubigeo$ = this.http 
    .get(`${this.baseUrl}/provincia/${ubigeoId}`, {headers: this.getHeaders()}) 
    .map(mapUbigeos) 
    .catch(handleError); 
    return ubigeo$; 
} 

Detail.component.ts

cargaPronvicia(ubigeoId: string) { 
    this._ubigeoService 
     .lisProvinciaByDepartamento(ubigeoId) 
     .subscribe((p) => { 
      this.provinciaSeleccionada = p 
       .find(item => 
        item.ubigeoId.substr(2, 2) === ubigeoId.substr(2, 2)); 
      this.provincias = p; 
      console.log(this.provinciaSeleccionada); //2 
     }); 

    console.log(this.provinciaSeleccionada); //1 
} 

undefined in console

Answer 1

這是因爲數據檢索是相對的async當你使用它作爲observalbes。 如果是空的，所以永遠不要直接使用變量，

良好做法

1. 跳過訂閱。

   cargaPronvicia(ubigeoId: string) { 
       this._ubigeoService 
       .lisProvinciaByDepartamento(ubigeoId) 
       //////////////////////////////////////////////////////////////// 
       .skipWhile((p) => p === undefined) 
       //////////////////////////////////////////////////////////////// 
       .subscribe((p) => { 
        this.provinciaSeleccionada = p 
         .find(item => 
          item.ubigeoId.substr(2, 2) === ubigeoId.substr(2, 2)); 
        this.provincias = p; 
        console.log(this.provinciaSeleccionada); //2 
       }); 
   
   console.log(this.provinciaSeleccionada); //1 
   } 
   

2. 你在哪裏都使用的是訂閱的變量，檢查它是否包含數據，你的情況的一個例子是

   if(this.provinciaSeleccionada){ 
       console.log(this.provinciaSeleccionada); 
   } 
   

更新1：

• 使用承諾最關心，理由是當您使用p在構造函數中放棄，在解決承諾之前，組件不會加載。
  • 通過這種速度的應用程序將如預期。
  • Angular2的反應性沒有被利用。