0

tengo un problema necesito crear n# de inputs de acuerdo al valor de una columna que traigo desde un servicio.

services.ts aqui no tengo problema me trae los datos

getcabecerayfila(){
      // this.showAlerts();
      this.Restservice.get('/matriz/lastrecord').subscribe(
        data => {
          if (data) {
            this.fyc = data;
            console.log(' exito obtencion matriz', this.fyc)
                    } else {
            //this.showError();
            console.log(' Error obtencion matriz', this.fyc)
          }
          this.datos = true;
        });

Html.

en este ejemplo del valor de uzgtmatriz_COLUMNA del ngfor es 2, por lo tanto deberia crearse 2 inputs.

<div class="ui-g-3" *ngFor="let c of fyc; index as i" >   a  {{i+1}}

            <input type="text" placeholder="{{c.uzgtmatriz_COLUMNA}}">

el problema es que solo me crea un solo input, no tengo idea como hacer para que cree el # de inputs de acuerdo al valor de campo. Alguna sugerencia por favor?

Datos que traigo de mi servicio

8
  • Ya validaste que 'fyc' tiene 2 datos como dices, acavo de hacer una pruba con un vector y me funciona perfectamente. Ahora ¿que funcion tiene a {{i+1 }}? ¿crear una especie de lista?
    – an-tet
    Commented el 2 abr. 2020 a las 20:07
  • Tiene 1 dato, pero el valor del dato es 2 y dependiendo del valor del dato se crean los inputs, ya adjunte la imagen donde me trae los datos
    – Kenny Cruz
    Commented el 2 abr. 2020 a las 20:30
  • el caso es que dependiendo del valor de uzgtmatriz_columna se crea el numero de inputs, en este caso vale 2 y deberia crearse 2 inputs, pero no tengo idea que esta mal o como hacer
    – Kenny Cruz
    Commented el 2 abr. 2020 a las 20:38
  • 1
    Creo que estas mal interpretanto el ciclo "for...of Loop", cuando usas este ciclo el recorre un conjunto de onjetos (Objects, vetores, etc), donde habran en ese conjunto una cantidad de objetos, estos objetos maracaran cuantas veces este ciclo se repite, si el conjunto solo tiene un objeto, solo podra repetirse una vez, en este caso "fyc" tiene un objeto por lo que esta haciendo lo que debe, dime si me entiendes.
    – an-tet
    Commented el 2 abr. 2020 a las 20:38
  • si te entendió, entonces me tocaría descomponer el valor 2, para que funcione? alguna idea de como hacerlo?
    – Kenny Cruz
    Commented el 2 abr. 2020 a las 20:42

1 respuesta 1

1

Como te explique en los comentarios confundes los arreglos que es lo que hacen, así que te dejo un enlace donde puedes documentarte sobre los ciclos, bajo TypeScript.

Documentacion de ciclos

Ahora, para poder repetir un componente con la directiva de *ngFor, lo hice de la siguiente forma:

export class Clase {
  uzgtmatriz_columna:number = 2;
}

Creo una variable numerica, para simular el valor de tu objeto.

<div class="ui-g-3" *ngFor="let c of [].constructor(uzgtmatriz_columna); let i = index">
  <input type="text" placeholder="{{i}}">
</div>

Ahora, creo el *ngFor tal cual como lo tenías en tu codigo, pero como te dije los ciclos for...of recorren arreglos o conjuntos de datos, como lo que intentas es recorrer con base a un numero, puedes usar el siguiente Código en el ciclo let c of [].constructor(uzgtmatriz_columna); let i = index, lo que hacer esto es crear un vector con un tamaño definido por una variable numérica definida anteriormente (en este lugar debes colocar el valor que obtienes de tu objeto), deberías ver el resultado que esperas, así:

Resultado

2
  • muchas gracias amigo, me salvaste
    – Kenny Cruz
    Commented el 2 abr. 2020 a las 21:52
  • Con gustos amigo
    – an-tet
    Commented el 2 abr. 2020 a las 22:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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