我在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天的数据。我的URL格式如下：
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
最佳答案
看起来您在代码中重用了elemId变量：
在这里，您从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”都指向相同的对象引用。
希望有帮助！
关于javascript - 获取URL参数elemId并将其添加到按钮的onClick属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50487484/