Question

我在AngularJS中有一个组件（名为histogram），它使用ChartJS显示数据图表。

它由另一个组件（称为cryostat）使用以下代码调用：

<div id="outer_pressure">Outer pressure ABS:<br/><a href="#!/histogram/PT0104"><span class="value">{{ $ctrl.PT0104[0].Mnish | number: 2 }} bar</span></a><br/>Outer pressure Diff:<br/><a href="#!/histogram/PT0105"><span class="value">{{ $ctrl.PT0105[0].Mnish | number: 2 }} mbar</span></a></div>

默认情况下，它使用elemId（在此示例中为PT0104）从数据库调用此元素的数据并加载最近3天的数据。

我的网址格式如下：http://server/np04-slow-control/app/#!/histogram/PT0104/3

我想要做的是在histogram组件页面上设置按钮，允许在不同的时间跨度（最后一天，过去3天，过去7天等）加载图表中的数据。

更新根据建议更正了组件代码

更新2 重新提出问题，试着让它更清晰。

我的HTML模板代码如下：

<style type="text/css">
     #chart-container {
         width: 80%;
         height: 100%;
     }
</style>

<div id="timespan" style="position: relative; left: 5%; top: 10%;">
    <span>History for:</span>

    <a class="btn" id="1day" href="#!/histogram/elemId/1">1 day</a>
    <button id="3days" onclick="#!/histogram/elemId/3">3 days</button>
    <button id="7days" onclick="#!/histogram/elemId/7">7 days</button>
    <button id="all"  onclick="#!/histogram/elemId/10">10 days</button>
</div>
<div id="chart-container">
     <canvas id="hist"></canvas>
</div>

控制器

'use strict';
angular.module('histogram', []).component('histogram', {
    templateUrl: 'histogram/histogram.template.html',
    controller: ['$routeParams', '$http',
        function histogramController($routeParams, $http) {
            this.elemId = $routeParams.elemId;
            if ($routeParams.days != null) {
                console.log(this.days);
                this.days = $routeParams.days;
            } else {
                this.days = 3;
            }
            this.pageTitle = this.elemId;
            this.natalie = 1;
            this.TT0101 = "";
            let self = this;
            let labels = [];
            let values = [];
            $http.get("php-db-conn/histogram.conn.php?elemId=" + this.elemId + "&days=" + this.days).then(function (response) {
            let title = self.elemId;
            let respdata = response.data.records;
            for (let i in self.elemId) {
                    labels.push(moment((respdata[i].TimeStamp), "DD-MMM-YYYY hh.mm.ss.SSSSSSSSS A"));
                    values.push(respdata[i].ExactValue);
                }
                let chartdata = {
                    labels: labels,
                    datasets: [
                        {
                            label: title,
                            tension: 0,
                            pointRadius: 1,
                            backgroundColor: 'rgba(200, 200, 200, 0.001)',
                            borderWidth: 1,
                            borderColor: 'rgba(200, 200, 200, 0.75)',
                            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                            hoverBorderColor: 'rgba(200, 200, 200, 1)',
                            data: values
                        }
                    ]
                };
                let ctx = $('#hist');

                let barGraph = new Chart(ctx, {
                    type: 'line',
                    data: chartdata,
                    options: {
                        legend: {
                            labels: {
                                fontColor: "white",
                                fontSize: 18
                            }

                        },
                        scales: {
                            xAxes: [{
                                type: "time",
                                time: {
                                    tooltipFormat: "DD/MM/YYYY HH:mm:ss",
                                    displayFormats: {
                                        millisecond: "HH:mm:ss.SSS",
                                        second: "HH:mm:ss",
                                        minute: "HH:mm",
                                        hour: "DD/MM HH:mm",
                                        day: "DD/MM/YYYY",
                                        week: "DD/MM",
                                        month: "MM YYYY",
                                        year: "YYYY"
                                    }
                                },
                                ticks: {

                                    fontColor: "white"
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                    fontColor: "white"
                                }

                            }]
                        }
                    }
                });
                console.log(labels);
            });
        }
    ]
});

我想要的是获取SPAREAI并将其附加到onclick网址。我在代码中用elemId标记了id

Answer 1

看起来您在代码中重复使用elemId varible：

在这里你可以从routeParams获得elemId

    this.elemId = $routeParams.elemId;

在这里你将“this”分配给self并重新分配elemId：

    let self = this;

   let labels = [];
        let values = [];
        $http.get().then(function (response) {

        let title = self.elemId;
        self.elemId = response.data.records;   **<---- This is the problem**

现在，当您尝试访问elemIdin模板时，它不会指向“$ routeParams.elemId”，而是指向response.data.records。在JS“=”运算符中不会深度复制对象。在你的情况下，“self”和“this”都指向同一个对象引用。

希望有所帮助！

Answer 2

经过深入研究后，我终于能够使其发挥作用。

<强>控制器在控制器代码中添加了以下功能： <schema xmlns="http://www.w3.org/2001/XMLSchema"> <element name="dummy"> <complexType> <sequence> <element name="Item" minOccurs="0" maxOccurs="unbounded"> </element> </sequence> <attribute name="id"/> </complexType> </element> </schema>

HTML模板 将按钮更改为以下内容：

this.dayChanger = function(funcdays) { $window.location.href = "#!/histogram/" + this.elemId + "/" + funcdays; }

获取URL参数elemId并将其添加到按钮onClick属性

2 个答案: