Challenges with variable scopes and passing variables in Ionic 2 (Typescript)

In my Ionic 2 TypeScript file, I am facing an issue with setting the value of a variable from another method. When I close the modal, I get undefined as the value.

I'm encountering difficulty in setting the value for coord.

export class RegisterMapPage {

      ..necessary variables declared here..
      public coord: any;

      constructor(
            ....
      ) {}

      ionViewDidLoad() {
            this.initMap()
      }

      initMap() {
            this.geolocation.getCurrentPosition().then((position) => {

                  // // // ..... All map-related code goes here....

                  google.maps.event.addListener(marker, 'dragend', function () {
                        this.coord = marker.getPosition().lat() + ', ' + marker.getPosition().lng();
                        console.log(this.coord); // prints perfectly at this point.
                  });

            }, (err) => {
                  console.log(err);
            });
      }

      chooseCoord() {
            console.log(this.coord); // why is it undefined??
            this.viewCtrl.dismiss(this.coords);
      }

}

Even though I update the variable value of coord during the marker drag event, it shows up as undefined when I try to print it out. Can someone assist me with fixing this issue?

Thank you.

Answer №1

When you use the this inside your callback function, it does not refer to the instance of RegisterMapPage because you are utilizing the traditional function() {} syntax for the callback. To ensure that the context is correct, switch to using an arrow function:

google.maps.event.addListener(marker, 'dragend', () => {
    this.coord = marker.getPosition().lat() + ', ' + marker.getPosition().lng(); // The `this` now points to the `RegisterMapPage` instance since arrow function is used
    console.log(this.coord); // It will print correctly here.
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm experiencing an issue with my Next.js Airbnb-inspired platform where I am unable to save a listing to my favorites

While working on my Next.js Airbnb clone project, I encountered an issue with adding a Listing to favorites. The heart button component's color does not change when clicked, despite receiving a success response. Moreover, the addition to favorites is ...

What are the steps to configure JSS in a TypeScript/NextJS application?

Trying to set up a basic web app using React, TypeScript, NextJS, and Material-UI has been quite the challenge. The main issue I am facing revolves around styling within my project. To better illustrate my problem, I have created a CodeSandbox environment. ...

While the AWS CodePipeline is executing the script, an error is appearing in the log. Please address this issue and resolve it

This is the content of buildspec.yml: version: 0.2 phases: install: commands: - npm install -g typescript pre_build: commands: - echo Installing source NPM dependencies... - npm install build: commands: - echo Bui ...

Exploring how to utilize optional URL parameters within Express.js

When using Express.js version 4.14, I implemented the following route: app.get('/show/:name/:surname?/:address?/:id/:phone?', function(req, res) { res.json({ name: req.params.name, surname: req.params.surname, address ...

Utilizing Material UI's (MUI) date picker in conjunction with react-hook-form offers a

I'm currently developing a form with a date field utilizing MUI and react-hook-form for validation. I have experimented with two different methods of rendering the field, but when I try to submit the form, the expected value is not being returned: Me ...

Maximizing performance: optimizing Javascript usage in .net Web Application

After completing a web application using C#, ASP, and some javascript, my main page is cluttered with a mix of javascript/jQuery at the bottom. I have several ajax calls to web methods in this mess. Is there a way to organize this javascript into multipl ...

Express and Angular 2 Integration in package.json

Hello, I am new to learning Angular 2 and have a better understanding of Express. One thing that is confusing me is the package.json file, particularly the "start" part. Here is my package.json when I only had Express installed: { "name": "Whatever", ...

Unable to trigger JavaScript function from ASP.NET MVC HTML view

I am encountering an issue with my ASP.NET MVC project where I am attempting to call a JavaScript function to record a user's selection from a listbox. Despite duplicating the JavaScript function in multiple places, it is still not being found. What c ...

Angular not detecting changes in string variables

Issue with variable string not updating var angulargap = angular.module("angulargap", []); angulargap.factory('cartService', function($rootScope,$http){ var fac ={ message:"factory", getCart:function(call){ $h ...

Unraveling and interpreting all incoming requests to my Node.js application

Looking for a simple method to identify and decipher all encoded characters in every URL received by my Node.js application? Is it possible to achieve this using a middleware that can retrieve and decode symbols such as & ? ...

Guide on clearing the value of the first textarea and transferring it to the second textarea using JavaScript

I have encountered an issue where the first textarea value is being copied into the second textarea because I am using the same id for the 'add more' functionality. Below is the code snippet: <div id="divShortAnswerOption_Templated"> & ...

Populate a table with data from a different table using JavaScript

On my webpage, I have a grid of selectable divs that are defined by rows and columns. When I select certain divs, it creates what I'll call "table Copy", a three-dimensional table. If I select different elements, another three-dimensional table calle ...

CSS guidelines for layering shapes and divs

Currently, I am in the process of developing a screenshot application to enhance my understanding of HTML, CSS, and Electron. One of the key features I have implemented is a toggleable overlay consisting of a 0.25 opacity transparent box that covers the en ...

I am experiencing issues with my Angular2 project where not all of my component variables are being passed to the

My problem involves sending three variables to my HTML template, but it only recognizes one of them. The HTML template I am using looks like this: <div class="page-data"> <form method="post" action="api/roles/edit/{{role?.ID}}" name="{{role? ...

What are the reasons for a jQuery function to run in a selective manner?

There seems to be some inconsistency in the behavior of this incomplete script that I'm trying to debug. The issue arises when I click off an item, as sometimes the $(editObj).removeAttr('style'); line of code executes and other times it doe ...

Using Node.js to read and replicate a JSON file

As someone who is relatively new to the world of NODE.JS, I am eager to level up my skills. Currently, I have a NODE.JS script that gathers data from a feed, resulting in a large JSON file. This file is then used by webpages and mobile apps to display con ...

Modify the initial header tag within the document to be <h1> instead of <h2>, <h3>, ... <h6>

In the event that the <h1> tag is not present, the script will search for the first header tag in the document (either <h2> through <h6>). If the text within this tag matches the title text, it will be converted to <h1 class="heading1" ...

Optimal strategies for managing subscriptions in Angular

I'm currently pondering about the concept of angular subscription and unsubscription. The amount of information available on this topic is overwhelming, making it hard for me to navigate through. When is the right time to unsubscribe from a subscript ...

NextJS is throwing an error: The prop `href` in `<Link>` should be a `string` or `object`, but it received `undefined` instead

I've encountered an issue while trying to integrate a header section from a GatsbyJS project into my NextJS project. The error message I'm receiving is: "Error: Failed prop type: The prop href expects a string or object in <Link>, but ...

Is there a way to send an array with data to a different component using react-redux within a Higher Order Component (H

It seems like I'm missing something because I can't seem to find any examples of how to pass an array with data from a Higher Order Component (HOC) to another component. Here is the code snippet: import React from 'react' import NoAc ...