Aurelia 中 Activate 中的方法

Question

我有一个从服务中的 HTTP Fetch 获取数据的图表。我使用 activate 来获取查询参数 (params.task)。从调试中，我可以看到图表的数据已成功提取，但问题是，我收到一个错误，我认为 - 从我的多次试验中，正在发生，因为当图表已呈现时图表数据尚不可用。我如何确保数据在图表呈现之前可用？尝试使用 if.bind 但它适用于我页面中的其他组件，图表除外。我正在使用 https://github.com/grofit/aurelia-chart 作为图表。

错误信息：

Cannot read property 'length' of undefined

图表服务Class.:

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

还有我在 TicketComponent 中的激活方法 Class:

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

您需要 return 来自 activate 方法的承诺：

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

通过return路由器生命周期回调中的承诺，路由器将等待承诺解决，然后再继续页面的生命周期。

Aurelia 中 Activate 中的方法

Method inside Activate in Aurelia

typescript

chart.js

aurelia