0

Buenos dias tengo un problema, tengo un ngfor y dentro del ngfor tengo un input que se repite de acuerdo a los valores del ngfor, todos los inputs generado utilizan el mismo ngmodel, y como saben al llenar un input la misma información se llena en los otros inputs, quisiera saber como puedo hacer para que cada input se diferencia de los anteriores y como guardar esos valores en un arreglo.

aqui mi codigo:

COMPONENT.TS
//variable que voy a utilizar para guardar los valores de los inputs.

    String: nombre_cabeceras;

    //servicio que implemento en el ngfor.

        getcolumnas() {
            this.Restservice.get('/matriz/lastcolumna').subscribe(
              data => {
                if (data) {
                  this.columnas = data;
                  console.log(' exito obtencion columna', this.columnas)
                } else {
                  //this.showError();
                  console.log(' Error obtencion columna', this.columnas)
                }
                this.datos = true;
              });
          }

HTML.

<div class="ui-g-12 ui-md-12">
        <h3 class="first">Item columna</h3>
        <div class="ui-g-8" *ngFor="let c of columnas">
          <input pInputText type="text" placeholder=" V{{c}}"  size="30"  [(ngModel)]="nombre_cabeceras">{{c}}
        </div>
      </div>

como ven al llenar un input el input de abajo de se llena con la misma informacion introducir la descripción de la imagen aquí

1
  • $index en angularjs
    – 404
    el 3 abr. 2020 a las 15:24

1 respuesta 1

1

En tu component.ts puedes definir nombre_cabeceras como un array y en la template puedes usar el índice para guardar los valores de los ngModel.

// comopnent.ts
nombre_cabeceras: string[] = [];
// template 
<div class="ui-g-8" *ngFor="let c of columnas; let i = index">
    <input pInputText type="text" placeholder=" V{{c}}" size="30" 
 [(ngModel)]="nombre_cabeceras[i]">{{c}}
</div>
2
  • disculpa amigo, como podria imprimir los valores de los inputs? en el template nombrecabeceras: {{nombre_cabeceras[i}} y en el ts con un console.log
    – Kenny Cruz
    el 3 abr. 2020 a las 16:57
  • 1
    en el template dentro del bloque del ngFor puedes poner {{ nombre_cabeceras[i] }}. En el ts eso depende si es para temas de debug puedes crear un <button (click)="showValues()">show vlaues</button> y en el ts showValues() { console.log(this.nombre_cabeceras); }
    – hawks
    el 3 abr. 2020 a las 17:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.