Javascript 角度-属性不'；不存在于HtmleElement（OpenLayers）上

我正在使用包含两个复选框的菜单编程一个地图，以显示或隐藏标记（当我单击标记时，我会显示GeoJSON文件中包含的一些信息）。我在HTML文件中有一个简单的版本，可以很好地工作，现在我想在Angular中做同样的事情

我已经修改了我的代码，除了弹出窗口，所有的都正常工作，forEachFeatureAtPixel函数有问题

app.component.ts:

import { Component, OnInit } from '@angular/core';

import OlMap from 'ol/map';
import OlWMS from 'ol/source/tilewms';
import OlTileLayer from 'ol/layer/tile';
import OlView from 'ol/view';
import VectorLayer from 'ol/layer/vector';
import VectorSource from 'ol/source/vector';
import Point from 'ol/geom/point';
import Style from 'ol/style/style';
import IconStyle from 'ol/style/icon';
import WFS from 'ol/format/wfs';
import GeoJSON from 'ol/format/geojson';
import Overlay from 'ol/overlay';
import feature from 'ol/feature';
import OlSwitch from 'ol-layerswitcher';
import Group from 'ol/layer/group';
import proj from 'ol/proj';
import $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  map: OlMap;
  layer: OlTileLayer;
  view: OlView;
  layerSwitcher: OlSwitch;
  WFS: WFS;
  vectorLayer_parking: VectorLayer;
  vectorLayer_piscine: VectorLayer;
  parkingLayer: VectorSource;
  piscineLayer: VectorSource;
  piscine: Style;
  markers: feature;
  popup: Overlay;

  constructor() {
  }

  handleSelected1($event) {
    if($event.target.checked === true) {
      this.map.addControl(this.vectorLayer_piscine);
      this.vectorLayer_piscine.setStyle(this.piscine);
      this.map.addOverlay(this.popup);
    } else {
      this.map.removeControl(this.vectorLayer_piscine);
      this.map.removeOverlay(this.popup);
    }
  }

  handleSelected2($event) {
    if($event.target.checked === true) {
      this.map.addControl(this.vectorLayer_parking);
      this.vectorLayer_parking.setStyle(this.markers);
      this.map.addOverlay(this.popup);
    } else {
      this.map.removeControl(this.vectorLayer_parking);
      this.map.removeOverlay(this.popup);
    }
  }

  ngOnInit() {

    {...}

    //popup

    var element = document.getElementById('popup');

    this.popup = new Overlay({
      element: element,
      autoPan: true,
      offset: [0, -30]
    });

    //Fonction d'affichage des popups

    var content_element = document.getElementById('popup-content');

    this.map.on('click', function(evt){
    var closer = document.getElementById('popup-closer');

    closer.onclick = function() {
      this.popup.setPosition(undefined); //where the problem is
      closer.blur();
      return false;
    };

    var feature = this.map.forEachFeatureAtPixel(evt.pixel,
      function(feature) {
        return feature;
      });
    if (feature) {
      var geometry = feature.getGeometry();
      var coord = geometry.getCoordinates();

      if(feature.get('name') != null) {
        var content = '<center><h2>' + feature.get('name') + '</h2></center>' + '<br>';
      } else {
        var content = '<center><h2>' + feature.get('NOM') + '</h2></center>' + '<br>';
      }

      if(feature.get('addr:street') != null) {
        content += '<h5>' + '<i>Adresse : </i>' + feature.get('addr:street') + '</h5>';
      } else if(feature.get('ADRESSE') != null) {
        content += '<h5>' + '<i>Adresse : </i>' + feature.get('ADRESSE') + '</h5>';
      } else {
        null;
      }

      if(feature.get('phone') != null) {
        content += '<h5>' + '<i>Numéro de téléphone : </i>' + feature.get('phone') + '</h5>';
      }

      if(feature.get('website') != null) {
        content += '<h5>' + '<i>Site internet : </i>' + '</h5>' + '<p>' + feature.get('website') + '</p>';
      }

      if(feature.get('CAPACITE')!=null) {
        content += '<h5>' + '<i>Capacité : </i>' + feature.get('CAPACITE') + '</h5>';
      }

      if(feature.get('PLACES')!=null) {
        content += '<h5>' + '<i>Places disponibles : </i>' + feature.get('PLACES') + '<h5>';
      }

      content_element = document.getElementById('popup-content');
      content_element.innerHTML = content;
      this.popup.setPosition(coord);
    }
  });

    this.map.on('pointermove', (e) => {
    if (e.dragging) {
      return;
    };
    var pixel = this.map.getEventPixel(e.originalEvent);
    var hit = this.map.hasFeatureAtPixel(pixel);

    this.map.getViewport().style.cursor = hit ? 'pointer' : '';
    });
  }
}

从'@angular/core'导入{Component，OnInit}；
从“ol/map”导入OlMap；
从“ol/source/tilewms”导入OlWMS；
从“ol/layer/tile”导入OlTileLayer；
从“ol/view”导入OlView；
从“ol/layer/vector”导入VectorLayer；
从“ol/source/vector”导入VectorSource；
从“ol/geom/Point”导入点；
从“ol/Style/Style”导入样式；
从“ol/style/icon”导入IconStyle；
从“ol/format/WFS”导入WFS；
从“ol/format/GeoJSON”导入GeoJSON；
从“ol/Overlay”导入覆盖；
从“ol/功能”导入功能；
从“ol layerswitcher”导入OlSwitch；
从“ol/层/组”导入组；
从“ol/proj”导入项目；
从“jquery”导入美元；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent实现OnInit{
地图：OlMap；
图层：OlTileLayer；
视图：OlView；
分层开关：OlSwitch；
WFS:WFS；
矢量层\停车场：矢量层；
矢量层\鱼：矢量层；
停车层：矢量源；
鱼层：矢量源；
鱼：花柱；
标记：特征；
弹出：覆盖；
构造函数（）{
}
handleSelected1（$event）{
如果（$event.target.checked==true）{
this.map.addControl（this.vectorLayer\u piscine）；
这个。矢量层_鱼。设置方式（这个。鱼）；
this.map.addOverlay（this.popup）；
}否则{
这个.map.removeControl（这个.vectorLayer\u piscine）；
this.map.removeOverlay（this.popup）；
}
}
handleSelected2（$event）{
如果（$event.target.checked==true）{
this.map.addControl（this.vectorLayer\u parking）；
this.vectorLayer_parking.setStyle（this.markers）；
this.map.addOverlay（this.popup）；
}否则{
this.map.removeControl（this.vectorLayer\u parking）；
this.map.removeOverlay（this.popup）；
}
}
恩戈尼尼特（）{
{...}
//弹出窗口
var元素=document.getElementById（'popup'）；
this.popup=新覆盖({
元素：元素，
自动扫描：是的，
偏移量：[0，-30]
});
//弹出窗口附加功能
var content_element=document.getElementById（'popup-content'）；
this.map.on（'click'，函数（evt）{
var closer=document.getElementById（'popup-closer'）；
closer.onclick=函数（）{
this.popup.setPosition（未定义）；//问题所在
closer.blur（）；
返回false；
};
var feature=this.map.forEachFeatureAtPixel（evt.pixel，
功能（特征）{
返回特性；
});
如果（功能）{
var geometry=feature.getGeometry（）；
var coord=geometry.getCoordinates（）；
if（feature.get（'name'）！=null）{
var content=''+feature.get（'name'）++'
；
}否则{
var content=''+feature.get（'NOM'）++'+'
'；
}
if（feature.get（'addr:street'）！=null）{
content+=''+'地址：'+feature.get（'addr:street'）+''；
}else if（feature.get（'address'）！=null）{
content+=''+'地址：'+feature.get（'adrese'）+''；
}否则{
无效的
}
if（feature.get（'phone'）！=null）{
content+=''+'手机号码：'+功能。get（'phone'）+''；
}
if（feature.get（'website'）！=null）{
内容+=''+'网站互联网：'+'+''+功能。获取（'website'）+'
'；
}
if（feature.get（'capacity'）！=null）{
content+=''+'电容：'+功能。get（'capacity'）+''；
}
if（feature.get（'PLACES'）！=null）{
content+=''+'放置争议文件：'+feature.get（'Places'）+''；
}
content_element=document.getElementById（'popup-content'）；
content\u element.innerHTML=内容；
这个.popup.setPosition（坐标）；
}
});
this.map.on（'pointermove'，（e）=>{
如果（如拖动）{
返回；
};
var pixel=this.map.getEventPixel（e.originalEvent）；
var hit=this.map.hasFeatureAtPixel（像素）；
this.map.getViewport（）.style.cursor=点击“指针”：“”；
});
}
}

问题出在closer.onclick函数上，我对该.popup

有一个问题（[ts]类型“HTMLElement”上不存在属性“popup”）

你有什么想法吗？
使
更接近。单击
一个箭头函数，它将
这个
作为
更接近
变量的范围，该变量实际上是一个
HTMLElement
。您可以像closer.onclick=（）=>{}一样声明它，并使用
closer.onclick=（）=>{this.popup.setPosition（未定义）；closer.blur（）；返回false；}该错误在我的Visual Studio代码环境中不再存在，但当我单击标记时，该错误仍然存在于导航器中…您可以放置一个断点以查看此
所指的内容吗？我已放置了一个
控制台.log（this.popup）在closer.onclick函数下，我收到“undefined”