Javascript 函数中未定义 Angular 变量?

Undefined Angular variable inside Javascript function?

我有一个像这样的 OpenLayers map 变量:

this.map = new Map({
  target: 'map',
  moveTolerance: 2,
  layers: [this.capaFondo, this.capaPropia, this.vector],
  view: new View({
    projection: proyeccion,
    center: fromLonLat([-1.629950, 42.62], proyeccion),
    zoom: 9.3
  })
});

我正在尝试像这样处理单击:

this.map.on('singleclick', function(evt) {
  const p = new Point(evt.coordinate).transform(this.map.getView().getProjection(), proyeccion);
  const properties = ['CP:geometry'];
  const featureRequest = new WFS().writeGetFeature({
        srsName: 'EPSG:25830',
        featurePrefix: 'CP',
        featureTypes: ['CadastralParcel'],
        outputFormat: 'application/json',
        propertyNames: properties,
        filter: containsFilter('geometry', p, 'EPSG:25830')
  });
}

但在函数内部,map 变量似乎未定义。

如何获取其中的map值?任何帮助都会很棒!

A function 创建了一个新的上下文。为了使它按照您期望的方式工作,您可以将 function (evt) {} 更改为箭头函数,如下所示:

this.map.on('singleclick', (evt) => {
  const p = new Point(evt.coordinate).transform(this.map.getView().getProjection(), proyeccion);
  const properties = ['CP:geometry'];
  const featureRequest = new WFS().writeGetFeature({
        srsName: 'EPSG:25830',
        featurePrefix: 'CP',
        featureTypes: ['CadastralParcel'],
        outputFormat: 'application/json',
        propertyNames: properties,
        filter: containsFilter('geometry', p, 'EPSG:25830')
  });
}

this great answer

中详细了解 this 在 JS 中的工作原理

您必须使用箭头函数才能使用此变量的全局范围

 this.map.on('singleclick', (evt) => {
  const p = new Point(evt.coordinate).transform(this.map.getView().getProjection(), proyeccion);
  const properties = ['CP:geometry'];
  const featureRequest = new WFS().writeGetFeature({
        srsName: 'EPSG:25830',
        featurePrefix: 'CP',
        featureTypes: ['CadastralParcel'],
        outputFormat: 'application/json',
        propertyNames: properties,
        filter: containsFilter('geometry', p, 'EPSG:25830')
  });
}