Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Beginner Web en 24 Mayo 2020, 12:25 pm



Título: capturar los valores que coloco en el input y el valor que me devuelve el index
Publicado por: Beginner Web en 24 Mayo 2020, 12:25 pm
hola como puedo capturar el valor que estoy colocando en el texto y el indice que me esta devolviendo el let i = index en cada ngFor??? los necesito para mandarlos a aun metodo

Código
  1. <div class="col-md-4 horizontal" *ngIf="iniciar">
  2.      <div *ngFor="let item of crossword; let i = index">
  3.        <input type="text" maxlength="1" id="input" value={{item}}> {{i}}
  4.        <button (click)="comprobar(i)">Comprobar</button>
  5.      </div>
  6.      <br>
  7.    </div>


Título: Re: capturar los valores que coloco en el input y el valor que me devuelve el index
Publicado por: EdePC en 24 Mayo 2020, 18:17 pm
- Veo que estás utilizando id="input" entonces deduzco que quieres identificar los input que estás creando vía *ngFor, en Angular puedes hacer estos utilizando un identificador denominado Template Reference Variable que en mi ejemplo pondré: #input, él crea un identificador único para cada <input>

juego.component.html
Código
  1. <div *ngFor="let letra of palabra; let i = index">
  2.  <input #input type="text" maxlength="1" size="1"> {{i}}
  3.  <button (click)="comprobar(i, input.value.toUpperCase())">Comprobar</button>
  4. </div>

- En mi caso lo convierto a Mayúsculas antes de enviarla, además notar que he llamando letra a variable que va iterando sobre palabra donde palabra es un Array formado a partir de dividir la palabra "RAT" en sus respectivas letras (["R", "A", "T"])

juego.components.ts (dentro de la Clase principal)
Código
  1.  palabra: string[] = "RAT".split("")
  2.  
  3.  comprobar(i: number, letra: string): void {
  4.    if ( this.palabra[i] === letra ) {
  5.      console.log(`${letra} es correcto`)
  6.    } else {
  7.      console.log(`${letra} es incorrecto`)
  8.    }
  9.  }