Angular 2 HTTP。在陣列

Question

存儲響應所以我有這樣的服務在Angular2

fetchData(){ 
    return this.http.get('https://ng-workout.firebaseio.com/Workouts/.json').map(
     (res) => res.json() 
    ); 
} 

然後將此組件

export class HomeComponent { 

workouts = []; 

constructor(private dataService: DataService){ 
} 

ngOnInit(){ 
this.dataService.fetchData().subscribe(
    data=> this.workouts =data 
    ); 
    console.log(this.workouts); 
    } 
} 

所以事情是，當我控制檯登錄「this.workouts」則返回0，一個空陣列。不應該有json文件中的所有記錄嗎？

Answer 1

您需要的console.log()代碼移到回調傳遞給訂閱

ngOnInit(){ 
    this.dataService.fetchData().subscribe(
    data=> { 
     this.workouts =data; 
     console.log(this.workouts); 
    }); 
} 

fetchData（觀測）是異步。您傳遞給訂閱的功能在數據可用時執行。