如何在 Typescript 的回调中访问 class 变量/方法?
How to access class variable / methods in callback in Typescript?
我在我的 angular 项目中使用高图表 API,所以我需要的是当我向下钻取到任何地图位置时,我有我传递到我的状态代码class 级别方法在其中做一些服务。
这是我当前的代码:
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);
}
调用下钻函数时,我想访问 this.getVendorProductStatsByStateCode
,它在我的 class 组件方法中。实现它的正确方法是什么?
您可以在变量中定义您的组件并使用此变量而不是 (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;
});
我在我的 angular 项目中使用高图表 API,所以我需要的是当我向下钻取到任何地图位置时,我有我传递到我的状态代码class 级别方法在其中做一些服务。
这是我当前的代码:
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);
}
调用下钻函数时,我想访问 this.getVendorProductStatsByStateCode
,它在我的 class 组件方法中。实现它的正确方法是什么?
您可以在变量中定义您的组件并使用此变量而不是 (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;
});