1

tengo un inconveniente con angular, quiero consumir un servicio que me trae una información en un arreglo mediante ngOnInit, el servicio me carga correctamente el arreglo pero ngFor no visualiza los datos. al momento de escribir en consola el arreglo me visualiza la información correcta y no me muestra ningún error éste es el código del component:

  ngOnInit() {
    this.idDocument = this._route.snapshot.paramMap.get('idDoc');
    this.idProcess = this._route.snapshot.paramMap.get('idProc');
    console.log(this.idDocument);

    if (this.idDocument !== null) {
      this.rest.getFilesFromId(this.idDocument)
          .subscribe(data => {
            this.files = data;
            console.log(this.files);
          });
    }
    if (this.idProcess !== null) {
      this.rest.getFilesFromProc(this.idProcess)
          .subscribe(data => {
            this.files = data;
            console.log(this.files);
          });
    }
  }

y el código html

 <div class="cont_tabInfo">
                <div class="cnt_signedDocument">
                  <div *ngFor="let fil of files " class="mr_signedDocument">
                    <div class="signedDocument" >
                        <div class="signedDocument_info">
                          <span class="signedDocument_name">{{fil.FileName}}</span>
                          <span class="signedDocument_id">{{fil.idFile}}</span>
                        </div>
                        <a href= {{fil.UrlDownload}} class="signedDocument_ico" target="_blank">
                          <img src="./assets/images/icons/download.svg" alt="Descargar" title="Descargar">
                        </a>
                      </div>      
                  </div> 
                </div>
              </div>

agradezco mucho la colaboración.

3
  • Como tienes declarado la variable files en tu ts?
    – jdflores
    Commented el 14 nov. 2019 a las 16:23
  • la he puesto de dos formas, una asi: files: File[] = []; y la otra files[]; siendo File una clase con las características que espero.
    – John Sora
    Commented el 14 nov. 2019 a las 16:28
  • Si puedes, recrea tú código con alguna página del estilo stackblitz.com para poder ver que está ocurriendo
    – jdflores
    Commented el 14 nov. 2019 a las 16:48

4 respuestas 4

0

En el caso de que no tengas declarada la variable files es muy probable que intente cargar el html y este no pueda generarse porque está a null o undefined la variable.

Te recomiendo que en el html añadas lo siguiente:

 <div class="cont_tabInfo">
                <div *ngIf="files" class="cnt_signedDocument">
                  <div *ngFor="let fil of files " class="mr_signedDocument">
                    <div class="signedDocument" >
                        <div class="signedDocument_info">
                          <span class="signedDocument_name">{{fil.FileName}}</span>
                          <span class="signedDocument_id">{{fil.idFile}}</span>
                        </div>
                        <a href= {{fil.UrlDownload}} class="signedDocument_ico" target="_blank">
                          <img src="./assets/images/icons/download.svg" alt="Descargar" title="Descargar">
                        </a>
                      </div>      
                  </div> 
                </div>
              </div>

Con el *ngIf="files" le estás diciendo que una vez que la variable files tenga datos y sea distinta de null o undefined te pinte los elementos.

En caso de que estes declarando la variable files de la siguiente manera:

files = [];

Cambia lo que te dije antes a: *ngIf="filas !== []" o *ngIf="filas.length > 0"

3
  • Gracias por la sugerencia, aun asi sigue pasando lo mismo, no me genera error pero tampoco pinta los datos
    – John Sora
    Commented el 14 nov. 2019 a las 16:41
  • Si no te pinta ningún error tampoco por la consola... revisaste que los estilos del CSS no tengan un display: none o algo por el estilo?
    – jdflores
    Commented el 14 nov. 2019 a las 16:43
  • no, los CSS están correctos, de echo, tengo otra función que se dispara mediante un botón, que me carga la información a la misma variable "files" y el ngFor si funciona en éste caso, pinta los datos correctos, pero necesito que también lo haga obteniendo la variable desde la URL con el ngOnInit
    – John Sora
    Commented el 14 nov. 2019 a las 16:49
0

Puede ser que files no este bien declarada. Prueba de hacerlo asi:

public files: any[] = [];

Para ayudarte mejor, podrias enseñarnos que es lo que te devuelve por consola? (Ès decir la data, no vaya a ser que lo que llegue no sea un Array)

O quizas lo que llegue por esa peticion no concuerde con tu classe File.

1
  • Hola, ya lo intente pero persiste el inconveniente.
    – John Sora
    Commented el 15 nov. 2019 a las 15:36
0

Tienes esto en el onInit:

if (this.idDocument !== null) {
  this.rest.getFilesFromId(this.idDocument)
      .subscribe(data => {
        this.files = data;
        console.log(this.files);
      });
}
if (this.idProcess !== null) {
  this.rest.getFilesFromProc(this.idProcess)
      .subscribe(data => {
        this.files = data;
        console.log(this.files);
      });
}

Es decir:

  • Si idDocument es distinto de null, se pedirán los datos mediante la llamada

    this.rest.getFilesFromId(this.idDocument)
    
  • Si idProcess es distinto de null, se pedirán los datos mendiante la llamada

    this.rest.getFilesFromProc(this.idProcess)
    

Ahora el detalle: ambos escenarios no son excluyentes, si la primera llamda se hace, te mostrará los datos en consola: console.log(this.files);

Entonces puede ocurrir que la segunda llamada también se haga, y si ésta devuelve un array vacío o un null/undefined, en consola se mostrará pero es fácil que pase desapercibido... pero habrá borrado todo lo recibido por la primera llamada.

Para complicarlo aún más, estas llamadas son asíncronas, así que estamos además en lo que se llama una condición de carrera: no sabes cuál de las dos respuestas llegará antes, quizá es la segunda llamada la que obtiene los datos y la primera la que los borra.

1
  • Hola, gracias por la respuesta, cambie el onInit para que hiciera solo una consulta pero aun así se sigue presentando el problema.
    – John Sora
    Commented el 15 nov. 2019 a las 15:34
0

He logrado solucionar moviendo a otro componente, dejando libre el app.component, y haciendo una suscripción a los parámetros de la siguiente manera:

 navigationSubscription = new Subject<any>();
 ngOnInit() {
 this.route.params.subscribe(params => {
  const idDocA = params.idDocA;
  const idProcA = params.idProcA;
  this.consultar( idProcA, idDocA);
});

}

Ésto con el fin de que al momento de generar cambios en la url, se dispare la suscripción y ejecute el método.

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.