Tengo una función llamada getPuzzle() que llama a una API para obtener datos. Quiero usar esos datos para modificar un div. El problema es que todo esto se hace en el constructor y, por lo tanto, el html aún no se ha cargado.
Así que puse el código que modifica el html en ionViewDidEnter, sin embargo, luego se ejecuta antes de la llamada a la API y faltan los datos this.puzzle
¿Cómo no ejecuto este código hasta que el HTML se haya cargado por completo y DESPUÉS de la llamada a la API?
ngOnInit() { this.getPuzzle(); } getPuzzle() { //Get puzzle info this.puzzlesService.getPuzzle().subscribe((data) => { this.puzzleType = this.puzzlesService.puzzleType; this.puzzle = this.puzzlesService.puzzle; }); } ionViewDidEnter() { //Set first tab if (this.puzzleType == 'text') { new Vara("#text", "assets/fonts/vara/Satisfy/SatisfySL.json", [{ text: this.puzzle, delay: 2000, x: 2 }], { fontSize: 25, strokeWidth: 1.5, duration: 15000, color: "black" }); } } Esto es bastante profundo en el pozo de tratar de usar RxJS de manera imperativa en lugar de decorativa (que es un olor de código bastante importante con RxJS). Aun así, esta es una forma de asegurarse de que this.puzzlesService.getPuzzle() dentro getPuzzle se haya emitido antes de que se ejecute el código después de //Set first tab .
letsGooooooo = new ReplaySubject(); ngOnInit() { this.getPuzzle(); } getPuzzle() { //Get puzzle info this.puzzlesService.getPuzzle().subscribe((data) => { this.puzzleType = this.puzzlesService.puzzleType; this.puzzle = this.puzzlesService.puzzle; this.letsGooooooo.next("GOOOOOOO!"); }); } ionViewDidEnter() { this.letsGooooooo.pipe( take(1) ).subscribe(_ => { //Set first tab if (this.puzzleType == 'text') { new Vara( '#text', 'assets/fonts/vara/Satisfy/SatisfySL.json', [ { text: this.puzzle, delay: 2000, x: 2, }, ], { fontSize: 25, strokeWidth: 1.5, duration: 15000, color: 'black', } ); } }); } Arregle su servicio para que puzzlesService cobre el rompecabezas actual y el tipo de rompecabezas como un observable en lugar de propiedades. Entonces no necesita volver a implementar todas esas funciones localmente.
ngOnInit() { // No local version of puzzlesService needed } ionViewDidEnter() { this.puzzlesService.getPuzzle().subscribe(puzzleData => { //Set first tab if (puzzleData.puzzleType == 'text') { // puzzleData.puzzleType instead of this.puzzleType new Vara( '#text', 'assets/fonts/vara/Satisfy/SatisfySL.json', [ { text: puzzleData.puzzle, // puzzleData.puzzle instead of this.puzzle delay: 2000, x: 2, }, ], { fontSize: 25, strokeWidth: 1.5, duration: 15000, color: 'black', } ); } }); }Está enfrentando problemas de ciclo de vida. Entonces, una buena manera de hacerlo es llamar a una función después del resultado de la Api. Y en su vista, puede usar una interrogación para evitar que los datos no estén listos para la interpolación {{ puzzle?.text }}
ngOnInit(){ this.getPuzzle(); } getPuzzle() { //Get puzzle info this.puzzlesService.getPuzzle().subscribe((data) => { this.puzzleType = this.puzzlesService.puzzleType; this.puzzle = this.puzzlesService.puzzle; this.updateView(); 👈🏽 }); } updateView() { //Set first tab if (this.puzzleType == 'text') { new Vara("#text", "assets/fonts/vara/Satisfy/SatisfySL.json", [{ text: this.puzzle, delay: 2000, x: 2 }],{ fontSize: 25, strokeWidth: 1.5, duration: 15000, color: "black" }); } }