[英]How to access class variable / methods in callback in Typescript?
I'm using high chart API in my angular project, so what I need is when I drilldown to any map location, I've got the state code which I passed into my class level method to do some service stuff in it.我在我的 angular 项目中使用了高级图表 API,所以我需要的是当我深入到任何地图位置时,我已经获得了我传递到我的类级方法中的状态代码,以在其中执行一些服务内容。
Here is my current code:这是我当前的代码:
ngOnInit() {
this.chartOptions = {
chart: {
height: (8 / 16) * 100 + '%',
events: {
drilldown(e) {
// ERROR Error: this.getVendorProductStatsByStateCode is not a function
this.getVendorProductStatsByStateCode(e.point.drilldown);
const chart = this as any;
const mapKey = 'countries/ca/' + e.point.drilldown + '-all';
const mapData = require(`@highcharts/map-collection/countries/ca/ca-on-all.geo.json`);
const provinceData = Highcharts.geojson(mapData);
provinceData.forEach((el: any, i) => {
el.value = i;
});
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: provinceData,
dataLabels: {
enabled: true
}
});
chart.setTitle(null, { text: e.point.name });
},
drillup() {
const chart = this as any;
}
}
},
title: {
text: ''
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#417BCC'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#F8BA03'
}
}
}
},
series: [
{
name: 'Canada',
data: caMap
}
],
drilldown: {}
};
}
getVendorProductStatsByStateCode(mapstateCode) {
console.log(mapstateCode);
}
Here is the stackblitz running example这是stackblitz 运行示例
When calling the drilldown function I want to access this.getVendorProductStatsByStateCode
, which is in my class component method.在调用向下钻取函数时,我想访问this.getVendorProductStatsByStateCode
,它在我的类组件方法中。 What is the right way to achieve it?实现它的正确方法是什么?
You can define your component in a variable and use this variable instead of (this) because it is instance of method not the component like that:你可以在一个变量中定义你的组件并使用这个变量而不是 (this) 因为它是方法的实例而不是像这样的组件:
caMap.forEach((el: any, i) => {
el.value = i;
el.drilldown = el.properties['hc-key'];
});
var myComp = this;
this.chartOptions = {
chart: {
height: (8 / 16) * 100 + '%',
events: {
drilldown(e) {
// ERROR Error: this.getVendorProductStatsByStateCode is not a function
myComp.getVendorProductStatsByStateCode(e.point.drilldown);
const chart = this as any;
const mapKey = 'countries/ca/' + e.point.drilldown + '-all';
//Stackbliz wont load data if you pass mapkey as variable. So I use a hard code one in this example.
// const mapData = require(`@highcharts/map-collection/${mapKey}.geo.json`);
const mapData = require(`@highcharts/map-collection/countries/ca/ca-on-all.geo.json`);
const provinceData = Highcharts.geojson(mapData);
// Set a random value on map
provinceData.forEach((el: any, i) => {
el.value = i;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.