もう1つを開始する前に終了操作

Question

コンポーネントがあり、サーバーからJSONをロードしてローカル変数にデータを保存する関数を呼び出し、次の行にローカル変数を読み込みますそれを操作します。

は、ここでは、コードです：

export class TasksComponent implements OnInit { 

    private tasksJSON = {}; 



    constructor(private router: Router, private variables: Variables, private apiService: ApiService) { 
     if (!this.variables.getIsLoggedIn()) { 
      this.router.navigate(['login']); 
     } 
    } 

    ngOnInit() { 
     this.getTasks(); 
     console.log("log 1:" + JSON.stringify(this.tasksJSON)); 
     let tasks = this.tasksJSON.tasks; 
     this.tasksJSON = Object.keys(tasks).map(function(k) { return tasks[k] }); 
     console.log("log 2:" + this.tasksJSON); 
    } 

    getTasks() { 
     this.apiService.getTasks(). 
      subscribe(
      data => this.tasksJSON = data, 
      //error => this.error = <any>error, 
      error => this.variables.setFailure(error), 
      () => console.log('log getTasks():' + JSON.stringify(this.tasksJSON) 
     ); 
    } 
} 

問題はlet tasks = this.tasksJSON.tasks;が始まると明らかにデータがロードされていないということですので、私はエラーを取得します。

ログは次のようになります。let tasks = this.tasksJSON.tasks;開始は、データの読み込みが完了したときことを、

export class ApiService { 

private localURL = '../app/apiFiles/'; 
getTasks() { 
     return this.http.get(this.localURL + 'tasks.json') 
      .map((res: Response) => res.json()) 
      .catch(this.handleError); 
    } 
} 

方法で解決することができます：

log 1:{} 
EXCEPTION: Uncaught (in promise): TypeError: can't convert undefined to object 
log getTasks():{"tasks":{"epg":[{"name":"EPGStart"},{"name":"EPGStop"},{"name":"AutoTimer"},{"name":"CleanupDB"},{"name":"RefreshDB"},{"name":"ClearRecordingStats"},{"name":"CleanupRefreshDB"}],"media":[{"name":"UpdateVideoDB"},{"name":"RebuildVideoDB"},{"name":"RebuildAudioDB"},{"name":"RebuildPhotoDB"},{"name":"ClearAudioStats"},{"name":"ClearVideoStats"},{"name":"ClearPhotoStats"}],"system":[{"name":"Hibernate"},{"name":"Standby"},{"name":"Shutdown"}]}} 

apiServiceは次のようになりますか？

編集：API-サービス

Answer 1

あなたgetTasksを追加しました（）メソッドは約束を返す必要があります。

その後、あなたは...約束が解決されたときにメソッドが呼び出されます

this.getTasks().then((returnValueOfGetTasks) => { 
    // Following code needs changing to use returnValueOfGetTasks 
    console.log("log 1:" + JSON.stringify(this.tasksJSON)); 
    let tasks = this.tasksJSON.tasks; 
    this.tasksJSON = Object.keys(tasks).map(function(k) { return tasks[k] }); 
    console.log("log 2:" + this.tasksJSON); 
}).catch((err) => { 
    // todo: handle err 
}); 

を行うことができます。

RxJSが提供する約束またはObservablesを使用することができます。

観測可能オブジェクトは、基本的には約束のストリームです。例えば観測可能なsubscribeメソッドはpromise thenメソッドに似ていますが、subscribeメソッドは、ストリームが発行されるたびに何度も呼び出すことができます。

今日、これは標準の非同期JSプログラミングです。非同期プログラミングは、基本的に即座に起こらないものを処理しています。例えばHTTP要求は応答に時間がかかります。