Currently, I am immersed in a project that involves using angular-google-map (agm) and incorporating various polygons to represent different elements. However, I have encountered an issue where my object array fails to update when I attempt to draw on the map in order to obtain a collection of coordinates for implementation.
In brief, my problem lies in the fact that my object array does not reflect updates when I utilize the .push method.
In the home.component.ts file:
export class HomeComponent implements OnInit {
ngOnInit(): void {
}
constructor(private cr: ChangeDetectorRef) { }
// Here is my initial polygon values
pathsLs: any[] = [[
{ lat: 43.51270075713179, lng: 16.468134790981548 },
{ lat: 43.51205153579524, lng: 16.46757689150645 },
{ lat: 43.5119745090715, lng: 16.466895610416667 },
{ lat: 43.51273927004248, lng: 16.466659576023357 },
{ lat: 43.51284380496191, lng: 16.467753917301433 },
]]
pointList: { lat: number; lng: number }[] = [];
// This function is used to update the Object array
addSomething() {
this.pathsLs.push(this.pointList);
this.pathsLs = [...this.pathsLs];
this.cr.detectChanges();
}
The issue arises when I invoke this function; although I can observe the updated data in console.log(this.pathsLs) and see the polygon drawn on the map correctly, upon refreshing the page, everything reverts back to the initial values. Hence, I am wondering if there is a means to physically display this change, for instance:
If I were to execute something like this
this.pathsLs.push([{ lat: 43.51174, lng: 16.46538 }])pathsLs: any[] = [[
{ lat: 43.51270075713179, lng: 16.468134790981548 },
{ lat: 43.51205153579524, lng: 16.46757689150645 },
{ lat: 43.5119745090715, lng: 16.466895610416667 },
{ lat: 43.51273927004248, lng: 16.466659576023357 },
{ lat: 43.51284380496191, lng: 16.467753917301433 },
],[{ lat: 43.51174, lng: 16.46538 }] <-- newly added
]