Pfthb

I would like to select a feature in Openlayers 3 in my Angular 5 app. Upon clicking on a feature, I get this weird message:

core.js:1449 ERROR TypeError: Cannot read property 'call' of undefined

I have to use Openlayers3 (and not a newer version).

My Html code:

<div #mapElement id="map" class="map"></div>

The component code is:

import AfterViewInit, Component, ElementRef, ViewChild, OnInit from '@angular/core';
declare var ol: any;

@Component(
 selector: 'app-taba-features',
 templateUrl: './taba-features.component.html',
 styleUrls: ['./taba-features.component.css']
)
export class TabaFeaturesComponent implements AfterViewInit 
 @ViewChild('mapElement') mapElement: ElementRef;
 public map: any;

 constructor() 
 // building a feature 'thing'
 const vectorSource = new ol.source.Vector();
 const thing = new ol.geom.Polygon([[
 ol.proj.transform([6.12, 52.23], 'EPSG:4326', 'EPSG:3857'),
 ol.proj.transform([6.125, 52.24], 'EPSG:4326', 'EPSG:3857'),
 ol.proj.transform([6.13, 52.23], 'EPSG:4326', 'EPSG:3857')
 ]]);
 const featurething = new ol.Feature(
 name: 'Thing',
 geometry: thing
 );
 vectorSource.addFeature(featurething);
 // building the map
 const twello = ol.proj.transform([6.11, 52.23], 'EPSG:4326', 'EPSG:3857');
 const osmlayer = new ol.layer.Tile(
 source: new ol.source.OSM()
 );
 const view = new ol.View(
 center: twello,
 zoom: 15
 );
 this.map = new ol.Map(
 layers: [osmlayer,
 new ol.layer.Vector(
 source: vectorSource
 )],
 view: view
 );

 const that = this;
 this.map.on('click', function (evt) 
 const pixel = [evt.pixel];
 that.map.forEachFeatureAtPixel(pixel[0], pixel[1], function (feature, layer) 
 console.log('Hit'); // *** show feature name? 
 );
 );
 

 ngAfterViewInit() 
 this.map.setTarget(this.mapElement.nativeElement.id);
 

The first solution is:

const that = this;
this.map.on('click', function(evt) 
 const pixel = evt.pixel;
 let selectedFeatures = 'Features: ';
 that.map.forEachFeatureAtPixel(pixel, function(feature, layer) 
 selectedFeatures += ' Region: ' + feature.get('N3NM');
 );
 document.getElementById('status').innerHTML = selectedFeatures;
 );

A second solution is:

const selectSingleClick = new ol.interaction.Select();
selectSingleClick.on('select', function (e) 
 let features = ;
 let selectedFeatures = 'Features: ';
 features = e.target.getFeatures().getArray();
 for (let i = 0; i < features.length; i++) 
 selectedFeatures += ' Region: ' + features[i].get('N3NM');
 
 document.getElementById('status').innerHTML = selectedFeatures;
);