Gracias. Un pequeño aporte: #4
Comments
|
Hola Joselon, gracias por el aporte. Es una buena idea, pero no es muy recomendable alterar directamente a las propiedades del dom mediante javascript, ya que puede interferir con eventos de Angular y causar resultados inesperados, como estamos utilizando Angular es mejor utilizar los recursos que ofrece angular para tal efecto. Una solución utilizando Angular sería utilizar una variable que podemos llamar showTexto que inicializamos a false: num: number; Y despues en la plantilla utilizar *ngIf para mostrar el texto: En la función compruebaNumero le diremos que showTexto valga true para que se muestre el texto: } Luego podemos utilizar el evento ionInput para llamar a una función que ponga la variable showTexto a false cada vez que se introduzca un valor: En el controlador tendremos la función ocultaTexto que simplemente pone showTexto a false: ocultaTexto(){ Espero que te sirva de ayuda. |
|
Muchas gracias por contestar:
Aquí iré dejando mis avances con tus tutoriales. He puesto un enlace a reviblog y he compartido la apk, con contador de intentos.
Muchas gracias de nuevo!
https://joselon79.neocities.org/ <https://joselon79.neocities.org/>
… El 7 jul 2020, a las 11:34, edurevilla ***@***.***> escribió:
Hola Joselon, gracias por el aporte.
Es una buena idea, pero no es muy recomendable alterar directamente a las propiedades del dom mediante javascript, ya que puede interferir con eventos de Angular y causar resultados inesperados, como estamos utilizando Angular es mejor utilizar los recursos que ofrece angular para tal efecto.
Una solución utilizando Angular sería utilizar una variable que podemos llamar showTexto que inicializamos a false:
...
export class HomePage {
num: number;
mayorMenor = '...';
numSecret: number = this.numAleatorio(0,100);
showTexto = false;
...
Y despues en la plantilla utilizar *ngIf para mostrar el texto:
<p *ngIf="showTexto">El número secreto es {{ mayorMenor }} {{ num }}
En la función compruebaNumero le diremos que showTexto valga true para que se muestre el texto:
compruebaNumero(){
if(this.num)
{
if(this.numSecret < this.num)
{
this.mayorMenor = 'menor que';
}
else if(this.numSecret > this.num)
{
this.mayorMenor = 'mayor que';
}
else{
this.mayorMenor = '';
}
this.showTexto = true;
}
}
Luego podemos utilizar el evento ionInput para llamar a una función que ponga la variable showTexto a false cada vez que se introduzca un valor:
<ion-input (ionInput)="ocultaTexto()" type="number" min="1" max="100" [(ngModel)]="num" placeholder="Introduce un número del 1 al 100"></ion-input>
En el controlador tendremos la función ocultaTexto que simplemente pone showTexto a false:
ocultaTexto(){
this.showTexto = false;
}
Espero que te sirva de ayuda.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub <#4 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC7WEHZONMHJHQZ6C4LWIPLR2L23BANCNFSM4OP3SZBA>.
|
Gracias Joselon, he instalado el apk y está muy bien, los comentarios al pulsar en "Resultados de la prueba" le dan originalidad :) Un saludo |
Buenas!
Lo primero agradecer los tutoriales de ionic. Estoy aprendiendo rápidamente gracias a ellos.
Me gustaría compartir mi pequeña aportación al mini juego. Cuando cambias el número (debido al binding) la frase de respuesta queda con la última comprobación "mayorMenor" pero con un nuevo número y puede llevar al jugador a despiste.
Se me ha ocurrido hacer esta frase invisible ante un cambio en el número hasta que se pulse el botón adivinar de la siguiente manera:
En la vista:
<ion-input type="number" min="1" max="100" [(ngModel)]="num" placeholder="Introduce un número del 1 al 100" onchange="document.getElementById('respuesta').style.visibility = 'hidden';">
En el controlador:
compruebaNumero(){
document.getElementById('respuesta').style.visibility = 'visible';
if(this.num)
..
Seguramente se pueda hacer con Angular mucho más sencillo, pero de momento se me ocurre esto.
The text was updated successfully, but these errors were encountered: