Issue arises when the value becomes nonexistent following the execution of a

Having an issue with my code where I have one class with a function in it, and another class that imports the first class to use that function. However, after the function is executed, I am not getting the expected value.

First class:

export class MoveEff {

    checkEffect(effectFaceOff1, moveEff1, moveEff2){
        if (effectFaceOff1 === 'grassgrass') {

            moveEff1 = 10;
            console.log(moveEff1);

        }
    }
}

Second class :


import { Component, OnInit } from '@angular/core';
import {GenIService} from "../Pokemons/gen-i.service";
import {MovesService} from "../Moves/moves.service";
import {MoveDataClass} from "../MoveDATA/move-data-class";
import {MoveEff} from "../MoveDATA/move-eff";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage implements OnInit {

  effectFaceOff1;
  moveEff1;
  moveEff2;

constructor(private moveeff: MoveEff) {}

 this.moveeff.checkEffect(this.effectFaceOff1, this.moveEff1, this.moveEff2);

 console.log(this.moveEff1, this.moveEff2);

After the last console.log, instead of seeing the value 10 for moveEff1, it appears as undefined.

Can someone help explain why this is happening and how I can solve it?

Answer №1

Simply exporting the class might not suffice. Consider exporting and importing all your methods as modules, or directly exporting the method itself.

Answer №2

It's unclear where the variables effectFaceOff1, moveEff1, and moveEff2 are being retrieved from. Remember, if they are @Input, their values cannot be accessed in the constructor.

To fix this issue, move your code to the ngOnInit lifecycle hook:

ngOnInit() {
  this.moveeff.checkEffect(this.effectFaceOff1,this.moveEff1,this.moveEff2);
  console.log(this.moveEff1,this.moveEff2);
}

Additionally, make MoveEff Injectable so that it can be provided to your class:

@Injectable({ providedIn: 'root' })
export class MoveEff {
  checkEffect(effectFaceOff1,moveEff1,moveEff2){
    if ( effectFaceOff1 === 'grassgrass') {
        moveEff1 = 10;
        console.log(moveEff1);
    }
  }
}

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

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3. One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change ...

What is the best way to access a value from a service scope in Angular 2?

I am working on an Angular 4 app and have a function to print content. Below is a snippet from my TypeScript file: print(id) { // console.log(temp) this.templateservice.getTemplateById(id).subscribe(template => { if (!template.success) { this.sna ...

Encountered a Solana Error while handling Instruction 2: custom program error with code 0x1000078

While attempting to create an AMM Pool using the 'ammCreatePool.ts' script from the raydium-sdk repository, I encountered the following error message. I executed the script directly with ts-node src/ammCreatePool.ts and made modifications so that ...

The property linerGradiant of r cannot be destructured because it is not defined

I encountered the error "Cannot destructure property linerGradiant of r as it is undefined" during runtime, making it difficult to debug. The issue seems to stem from the compiled JS file, which is hard to read. The function is defined as follows: functio ...

Is it possible to utilize setIn for establishing a fresh index on an array that is currently empty?

Having trouble using Immutable in this specific structure: myMap = Map({a: [], b: []}); myMap.setIn(['a', 0], 'v'); An exception is being thrown when trying to do this immutable.js Error: invalid keyPath at invariant (immutable. ...

Using canvas elements to position divs in three.js

I am currently in the process of developing a custom animation player using Three.js for rendering objects, which is functioning perfectly. However, I am encountering difficulty when trying to incorporate control options at the bottom of the player (such a ...

AngularJS ng-click incompatibility causing non-functioning popover content

I've gone through all the posts regarding this issue, but unfortunately, none of them proved to be helpful. It seems that the jsfiddle and plunker links provided are no longer functioning as expected. My objective is quite simple - I want to place a ...

The functionality for making a GET request in a React Component is not functioning as

I have successfully imported the axios library and React. In a React component, I am making a GET call which is returning a response like this: {"functionality": [ {"category": "", "price": 2.0, "moltiplicator": 100.0, "name": "Plat"} ] } How ...

Dealing with performance issues in React Recharts when rendering a large amount of data

My Recharts use case involves rendering over 20,000 data points, which is causing a blocking render: https://codesandbox.io/s/recharts-render-blocking-2k1eh?file=/src/App.tsx (Check out the CodeSandbox with a small pulse animation to visualize the blocki ...

Discovering the screen dimensions or viewport using Javascript in Bootstrap 4

Is there a method to identify the view port/screen size being utilized by Bootstrap 4 using Javascript? I've been struggling to find a dependable way to determine the current view port after a user resizes the browser. I attempted to use the Bootstra ...

Show an image on a webpage using a URL from a Firebase database with HTML

How can I dynamically display images from URLs in my table? My table automatically increments every time new data is added, but I'm having trouble displaying images. The table already shows the URL where the image should be displayed. Here is the ou ...

Using THREE.js to pass an array of vec2 to a shader

I've spent quite some time browsing the internet but haven't found the right solution yet. I came across a list of uniform types used by THREE.js and believe the code below should be accurate. I'm defining a uniform array of Vector2 at the ...

Angular and Webpack combined to output the build project to the specified output path

In the process of integrating my Angular client-side application with a server-side written in Spring, I am seeking a way to build the UI project and store it in the /target directory within the backend portion for easy installation using Maven. My uncer ...

Adjusting the IntelliSense Functionality in Monaco Editor

Currently, I am testing out the CompletionItemProvider feature for my project. I have implemented two separate CompletionItemProviders. One is set to trigger when any alphabet letter is typed and the other triggers when the user enters a single quote chara ...

react-responsive: The children of a Responsive component do not have the capability to receive props

Utilizing the typical scenario described in the README file: const Desktop = props => ( <Responsive {...props} minWidth={1680} maxWidth={2560} /> ) const LaptopL = props => ( <Responsive {...props} minWidth={1440} maxWidth={1679} /> ...

Tips on adjusting the size of a base64 image in Angular

I have been attempting to resize a base64 image without success. I tried using canvas, but it didn't work. I'm not sure what the issue is... Here is the code snippet I used: const canvas = document.createElement('canvas'), ...

Error: Unable to access the 'push' property of null when handling multiple requests

I am in the process of creating an Angular Node application rating system. Within this system, I am attempting to iterate through an array of IDs that were sent to the server via a POST request and push those IDs using a for loop into the "users need to ra ...

Information vanishes as the element undergoes modifications

I am currently working with a JSON file that contains information about various events, which I am displaying on a calendar. Whenever an event is scheduled for a particular day, I dynamically add a div element to indicate the presence of an event on the c ...

How can I switch the header bar button from "login" to "logout" in a React

I am currently working on a React and Next.js frontend template, specifically focusing on creating a dashboard with a header bar and login button. Once a user logs in, the login button should change to a logout button and the links in the header should als ...

Exploring the proper syntax of the reduce() method in JavaScript

Here are two codes that can be executed from any browser. Code1: let prices = [1, 2, 3, 4, 5]; let result = prices.reduce( (x,y)=>{x+y} ); // Reduces data from x to y. console.log(result); Code2: let prices = [1, 2, 3, 4, 5]; let result = prices.red ...