Parece que no puedo entender por qué el primer console.log muestra el parámetro correctamente, pero el segundo muestra indefinido.
Salida de registro de la consola:
text undefinedCódigo:
ngOnInit() { this.getPuzzle(); } getPuzzle() { this.restProviderService.getPuzzle(this.gameService.getGameId()).subscribe(puzzle => { this.puzzleType = puzzle.type; this.puzzleValue = puzzle.value; console.log(this.puzzleType); setTimeout(this.handlePuzzle , 3000); }); } handlePuzzle() { console.log(this.puzzleType); if (this.puzzleType == 'text') { new Vara("#text", "assets/fonts/vara/Satisfy/SatisfySL.json", [{ text: 'hello', delay: 2000, x: 2 }], { fontSize: 25, strokeWidth: 1.5, duration: 5000, color: "black" }); } }Cuando pasa la función this.handlePuzzle a setTimeout el this que representa a su clase se pierde, y handlePuzzle recibe setTimeout 's this en su lugar.
Use una función de flecha en lugar de pasar la función en sí:
setTimeout(() => this.handlePuzzle(), 3000);Dentro de los detectores de eventos JS, this se refiere al objetivo del evento. Pero dentro del método handlePuzzle (una especie de detector de eventos), necesita this para referirse a la instancia del objeto actual (como es habitual en un método).
Tienes 2 soluciones:
Utilice una devolución de llamada de flecha. Las devoluciones de llamada de flecha conservan el valor de this .
setTimeout(()=>this.handlePuzzle(), 3000)
o en su declaración de método
handlePuzzle=()=> { console.log(this.puzzleType);
Use bind para establecer el valor de this .
setTimeout(this.handlePuzzle.bind(this), 3000);
o, en el constructor
this.handlePuzzle = this.handlePuzzle.bind(this);
Para obtener más detalles, consulte el siguiente artículo. https://dev.to/alexdevero/una-guia-rapida-para-esta-palabra-clave-en-javascript-que-es-y-cuando-7i5