メソッド内部のAureliaでのアクティブ化

Question

私は、サービス内のHTTP取得からデータを取得するチャートを持っています。私は、クエリパラメータ（params.task）を取得するためにactivateを使用します。デバッグから、私はチャートのデータが正常に引っ張られていることがわかりますが、問題は、チャートがレンダリングされたときにチャートのデータがまだ利用できないため、私は何度も試行錯誤していると思います。グラフをレンダリングする前にデータを使用できるようにするにはどうすればよいですか？ if.bindを使って試してみましたが、グラフを除いて私のページの他のコンポーネントで動作します。私はhttps://github.com/grofit/aurelia-chartをグラフに使用しています。

エラーメッセージ：

未定義

ChartServicesクラスのプロパティ '長さ' を読み込めません：

getChart(ticket: string) { 
    return this.http.fetch(this.api('chart?ticketNumber=' + ticket)) 
     .then(result => result.json()); 
} 

そしてTicketComponentクラスで私のactivateメソッド：

activate(params, routeConfig) { 
    this.chartService.getChart(params.task) 
     .then(response => this.resetLineData(response)); 
} 

resetLineData(chart: any) { 
    this.SimpleLineData = { 
     labels: chart.labels, 
     datasets: chart.dataSets, 
    }; 
} 

そして、私のHTML

<template> 
<require from="./ticket.component.css"></require> 
<div class="row"> 
    <div class="col-lg-8"> 
     <div class="chart"> 
      <fieldset> 
       <legend> ${ ticketName } </legend> 
       <canvas id="bar-chart" chart="type: bar; should-update: true; data.bind: SimpleLineData"></canvas> 
      </fieldset> 
     </div> 
    </div> 
</div> 

Answer 1

あなたはactivateメソッドからの約束を返す必要があります：ルータ・ライフサイクル・コールバックからの約束を戻すことにより

activate(params, routeConfig) { 
    return this.chartService.getChart(params.task) 
       .then(response => this.resetLineData(response)); 
} 

、ルータは、前に解決するための約束を待ちますページのライフサイクルに合わせて移動します。