角2、変数がサービス内で更新されていません

Question

APIサービスの後にログオンしようとすると、APIサービスを作成して変数にデータを割り当てようとしていますが、変数は更新されていません。

import {Component,Input,Output,EventEmitter} from 'angular2/core'; 
import {NgClass,NgFor} from 'angular2/common'; 
import {Observable} from 'rxjs/Observable'; 
import {ChangeDetectionStrategy} from 'angular2/core'; 
import {ValuesPipe} from '../pipes/values'; 
import {ApiRequestService, Query} from '../services/apiRequestService'; 




@Component({ 
selector: 'browsePCLatestRelease', // <home></home> 
directives: [NgClass,NgFor], 
changeDetection: ChangeDetectionStrategy.OnPush, 
pipes: [ ValuesPipe ], 
styles: [ require('./browsePCLatestRelease.less') ], 
template: require('./browsePCLatestRelease.html') 
}) 
export class browsePCLatestRelease { 

public arrayOfKeys; 
pcLatestrelease:Array<any> ; 
query: Query; 

constructor(private _apiService: ApiRequestService) { 
} 

ngOnInit() { 

this.query = this._apiService.createQuery('browsePC.getIssue'); 
this.query.params({ 
    volume: '60', 
    issue: '50' 
}); 
this._apiService.execute(this.query) 
    .subscribe(

    data => this.pcLatestrelease=data, 
    error => console.log(error), 
    () => console.log('pcLatestrelease retrived') 

); 

console.log('this.pcLatestrelease'); 
console.log(this.pcLatestrelease); // logged as undefined 

} 


} 

HTML

<div *ngFor = "#thisRelease of pcLatestrelease"> 
     {{thisRelease.title}} 
</div> 

は誰かが、事前に感謝を手伝ってくれる。あなたの関数に記載されている

Answer 1

コードは

export class browsePCLatestRelease { 

    ... 

    ngOnInit() { 

    this.query = this._apiService.createQuery('browsePC.getIssue'); 
    this.query.params({ 
     volume: '60', 
     issue: '50' 
    }); 
    this._apiService.execute(this.query) 
    .subscribe(
    // here you pass a function to subscribe of an observable 
    // the function gets called when the data arrives (from the server) 
     data => this.pcLatestrelease=data, 
     error => console.log(error), 
    () => console.log('pcLatestrelease retrived') 
    ); 

    // this code is executed immediately after the function (callback) 
    // was passed to subscribe, but the function wasn't yet executed 
    console.log('this.pcLatestrelease'); 
    console.log(this.pcLatestrelease); // logged as undefined 
    } 
} 

は、データが最終的に

data => this.pcLatestrelease=data, 

実行され、this.pcLatestrelease

に割り当てられた値に到達するとき、次に行ずつ実行されません

データ到着後にコードを実行する場合は、

export class browsePCLatestRelease { 

    ... 

    ngOnInit() { 

    this.query = this._apiService.createQuery('browsePC.getIssue'); 
    this.query.params({ 
     volume: '60', 
     issue: '50' 
    }); 
    this._apiService.execute(this.query) 
    .subscribe(
    // here you pass a function to subscribe of an observable 
    // the function gets called when the data arrives (from the server) 
     data => { 
     this.pcLatestrelease=data; 
     console.log('this.pcLatestrelease'); 
     console.log(this.pcLatestrelease); // logged as undefined 
     }, 
     error => console.log(error), 
    () => console.log('pcLatestrelease retrived') 
    ); 

    } 
} 

更新

import {Component,Input,Output,EventEmitter, NgZone} from 'angular2/core'; 

... 

export class browsePCLatestRelease { 

    constructor(private _apiService: ApiRequestService, private _zone.NgZone) { 
    }  

    ... 

    ngOnInit() { 

    this.query = this._apiService.createQuery('browsePC.getIssue'); 
    this.query.params({ 
     volume: '60', 
     issue: '50' 
    }); 
    this._apiService.execute(this.query) 
    .subscribe(
    // here you pass a function to subscribe of an observable 
    // the function gets called when the data arrives (from the server) 
     data => { 
     this.zone.run(() => { 
      this.pcLatestrelease=data; 
      console.log('this.pcLatestrelease'); 
      console.log(this.pcLatestrelease); // logged as undefined 
     }); 
     }, 
     error => console.log(error), 
    () => console.log('pcLatestrelease retrived') 
    ); 

    } 
}