Within the parent component's forEach loop, I am retrieving coordinates of each layer on the map and identifying those that intersect with the click point. Subsequently, using EventEmitter, I transmit this information to the child component.
this.airspaceLayers.forEach((o: any) => {
let coord = o.geometry.coordinates[0];
let poly = turf.polygon([coord]);
this.map.on('click', <LeafletMouseEvent> (e) => {
let lat = e.latlng.lat;
let lng = e.latlng.lng;
let pt = turf.point([lng,lat])
let isInside = turf.inside(pt, poly);
if (isInside) {
layerObjData.push(o);
this.intersectedLayers.emit({layerObjData});
}
Upon receiving data in the child component:
if (this.intersectedLayers && this.selectedRowIndex) {
this.intersectedLayers.subscribe(data => {
//console.log('check-how-many-iterations');
//console.log("data",data);
let arr: any[] = [];
Object.keys(data).forEach(function(item) {
arr.push(data[item]);
});
this.intersectedLayersData = arr;
//console.log("intersectedLayersData",this.intersectedLayersData);
...and finally, multiple objects are returned from the parent component as follows:
intersectedLayersData [Array(1)]
0: Array(1)
0: {type: "TRA", designator: "EPTR94", availabilities: Array(1), info: Array(2), geometry: {...}}
intersectedLayersData [Array(1)]
0: Array(1)
0: {type: "TRA", designator: "EPTR129A", availabilities: Array(1), info: Array(2), geometry: {...}}
I aim to present all the data in the Angular component's HTML individually as separate divs and ponder over the proper way to achieve this.
I initially expected arr.push() within the forEach loop to append each object to a single array, but instead, I obtained two distinct objects.
Ideally, the display should resemble something like:
<div *ngFor="let obj of intersectedLayers">
<h3>{{obj.intersectedLayers.designator}}</h3>
(etc...)
</div>
I read about potentially utilizing keyvalue and Pipes to exhibit this data, however, it didn't function as intended for multiple objects – typically accommodating just one object.
How can I effortlessly and effectively showcase this data?