This question already has answers here:
How to access the correct `this` inside a callback?
(12 个回答)
1年前关闭。
对此我有点绝望。我有一个组件,它获取数据并使用这些数据的信息呈现 map 。这里一切都好。我在这张 map 上放置了标记,我想在标记中执行点击功能。这些函数调用组件中定义的另一个函数,并为我提供数据以在模态中显示它。但是,当我单击标记时,我收到此错误:
我不知道为什么。我证明了很多事情,但我看不到错误。这是我的代码:
有任何想法吗?提前致谢!
在 Javascript 和 Typescript 中
(12 个回答)
1年前关闭。
对此我有点绝望。我有一个组件,它获取数据并使用这些数据的信息呈现 map 。这里一切都好。我在这张 map 上放置了标记,我想在标记中执行点击功能。这些函数调用组件中定义的另一个函数,并为我提供数据以在模态中显示它。但是,当我单击标记时,我收到此错误:
我不知道为什么。我证明了很多事情,但我看不到错误。这是我的代码:
import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet.markercluster';
import { MapService } from './services';
import * as global from 'app/globals';
import { Alteracion } from './dto/alteracion';
@Component({
selector: 'map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
public alteraciones: Alteracion[] = [];
public alteracion: Alteracion[] = [];
constructor(private mapService: MapService) {}
ngOnInit() {
this.getAlteraciones();
}
getAlteraciones() {
this.mapService.getListAlteraciones(11, 1).subscribe(
result => {
this.alteraciones = result;
this.renderMap();
},
err => console.log(err)
);
}
getInfoAlteracion(id_alteracion: string) {
this.mapService.getInfoAlteracion(id_alteracion).subscribe(
result => {
this.alteracion = result;
console.log(this.alteracion);
},
err => console.log(err)
);
}
renderMap() {
L.Icon.Default.imagePath = 'assets/img/theme/vendor/leaflet/';
let map: any;
map = L.map('map', {
zoomControl: false,
format: 'image/jpeg',
center: L.latLng(40.4166395, -3.7046087),
zoom: 2,
minZoom: 0,
maxZoom: 19,
layers: [this.mapService.baseMaps.Esri]});
L.control.zoom({ position: 'topleft' }).addTo(map);
L.control.layers(this.mapService.baseMaps).addTo(map);
let cluster = L.markerClusterGroup();
for (let al of this.alteraciones) {
let marker = L.marker([al.coory, al.coorx]);
marker.on('click', function(e) {
alert('Id alteración: ' + al.id_alteracion); // THIS WORKS
this.getInfoAlteracion(al.id_alteracion); // THIS DON'T WORK
console.log(this.alteracion);
});
cluster.addLayer(marker);
}
map.addLayer(cluster);
}
有任何想法吗?提前致谢!
最佳答案
您需要为事件处理程序使用箭头函数
marker.on('click', (e) => {
alert('Id alteración: ' + al.id_alteracion); // THIS WORKS
this.getInfoAlteracion(al.id_alteracion); // THIS DON'T WORK
console.log(this.alteracion);
});
在 Javascript 和 Typescript 中
this
由调用者确定 function
。箭头函数从声明站点捕获 this
。很简单 this
方式不是您期望的那样。关于Angular - this.function 不是一个函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48808626/