Question

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

错误讯息：

无法读取未定义的属性“长度”

ChartServices Class。：

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));
}

通过从路由器生命周期回调中返回promise，路由器将等待承诺解析，然后再继续使用页面的生命周期。

在Aurelia中激活的方法

1 个答案: