里面的方法激活奥里利亚

Question

我有一个图表，从服务中的HTTP提取获取数据。我使用activate来获取查询参数（params.task）。从调试中，我可以看到图表的数据已成功提取，但问题是，我发现一个错误，我认为 - 从我的众多试验中，正在发生，因为图表的数据在图表渲染时尚未提供。我如何确保数据在图表呈现之前可用？尝试使用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(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)); 
} 

通过返回从路由器生命周期回调的承诺，路由器将等待之前解决的承诺继续浏览网页的生命周期。