-1

Eu tenho duas classes. Uma que contem a função e outra que importa essa função. Por algum motivo que nao consegui descobrir o valor da variavel depois da função fica undefined.

Primeira class

export class MoveEff {

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

            moveEff1 = 10;
            console.log(moveEff1);

        }
    }
}

Segunda 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);

No ultimo console.lo eu deveria ver o valor 10 do moveEff1, mas aparece undefined.

Porque e como posso resolver?

1
  • Você esta esperando que this. funcione fora/solta da classe?
    – Syzoth
    Commented 29/05/2020 às 1:43

1 Resposta 1

1

Então, o que está tentando fazer não vai dar certo mesmo e provavelmente no console deve estar mostrando erros porque:

  • 1º : Você está fazendo uma injeção de dependência de uma classe comum.
  • 2º : Você está utilizando this fora de um contexto, ou seja, fora de um método como ngOnInit() por exemplo.

Algumas alternativas que podem ajudar a conseguir o que deseja fazer:

1 - Transformando a classe em um service

import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable()
export class MoveEff {
  checkEffect(effectFaceOff1, moveEff1, moveEff2) {
    if ( effectFaceOff1=== 'grassgrass') {
      moveEff1 = 10;
      console.log('Esse valor é: ', moveEff1);  // no console Esse valor é 10
    }
  }
}

Classe que chama o service:

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'],
  providers: [MoveEff]
})
export class HomePage implements OnInit {

  effectFaceOff1;
  moveEff1;
  moveEff2;

  constructor(private moveeff: MoveEff) {}

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

OBS: Pode ver o código funcionando aqui.


2 - Exportando a função diretamente ao invés de uma classe

export function checkEffect(effectFaceOff1, moveEff1, moveEff2) {
  if (effectFaceOff1 === "grassgrass") {
    moveEff1 = 10;
    console.log('Esse valor é: ', moveEff1);  // no console Esse valor é 10
  }
}

Classe que chama o service:

import { Component, OnInit } from '@angular/core';
import { checkEffect } from './moveeff';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

 effectFaceOff1 = 'grassgrass';
 moveEff1;
 moveEff2;

 constructor() {}

 ngOnInit() {
   checkEffect(this.effectFaceOff1,this.moveEff1,this.moveEff2);  // sem o this
   console.log(this.moveEff1,this.moveEff2);
 }

}

OBS: Pode ver o código funcionando aqui.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .