0

Estamos realizando una aplicación en la que utilizamos Angular 2 y Parse para el back. En la aplicación guardamos proyectos o "challenge" como se llama nuestro objeto y ahora queremos mostrarlos en un componente de angular.

El problema está en que aunque ya está regresando un arreglo con el resultado que necesitamos, no está mostrando los resultados en el .html.

Este es el .html en donde queremos mostrar la lista de los challenges activos que obtenemos de un servicio:

 <div class="row">
  <div class="col s12 m6 l6" *ngFor="let challenge of challenges">
    <p>FOR</p>
    <div class="box">

      <div class="description" routerLink="/challenge">
        <p class="name">{{ challenge.namechallenge }}</p>
        <p>{{ challenge.categorie }}</p>
      </div>
      <div class="img-picture">
        <img [src]="challenge.thumbnailFile.url"/>
      </div>

      <p class="days">¡Te quedan X días para mandar tu propuesta!</p>
      <p class="days">{{ challenge.enddate }}</p>  

    </div>

  </div>
</div>

Este componente manda a llamar nuestro servicio de challenge.service getActiveChallenges en el OnInit.

import { Component, OnInit, NgZone } from '@angular/core';
import { ParseService } from '../services/parse.service';
import { ChallengesService } from '../services/challenges.service';
import { Challenge } from '../classes/challenge';

@Component({
selector: 'app-challenges',
templateUrl: './challenges.component.html',
styleUrls: ['./challenges.component.css']
})
export class ChallengesComponent implements OnInit {

public userRole:number;
public challenges;
public pastChallenges:any[];

constructor(private challengesService: ChallengesService) { 
  this.user.role = localStorage.getItem('role')
  this.getUserRole()
  this.getPastChallenges();
}

ngOnInit() {
 this.challengesService.getActiveChallenges(true, (challenges) => {
   this.challenges = challenges;
   console.log(this.challenges);
  });
}

}

Y finalmente este es el servicio que está regresando ya el arreglo con los resultados.

getActiveChallenges(active: boolean, success:(challenges) => void) {

var challengeParse = Parse.Object.extend("Challenge");
var query = new Parse.Query(challengeParse);

var challenges = new Array;

query.equalTo("active", true);
query.find({
  success: function (results) {

    //Se recorren los resultados del query
    for (var i = 0; i < results.length; i++) {
      var challenge = new Challenge();
      var object = results[i];

      challenge.namechallenge = object.get("namechallenge");
      challenge.mark = object.get("mark");
      challenge.thumbnailFile = object.get("thumbnailFile");
      challenge.categorie = object.get("categorie");
      challenge.startdate = object.get("startdate");
      challenge.enddate = object.get("enddate");
      challenge.releasedate = object.get("releasedate");
      challenge.publicationdate = object.get("publicationdate");
      challenge.resume = object.get("resume");
      challenge.brief = object.get("brief");
      challenge.format = object.get("format");
      challenge.guidelines = object.get("guidelines");
      challenge.other = object.get("others");
      challenge.rules = object.get("rules");
      challenge.awards = object.get("awards");

      challenges.push(challenge);

    }
    console.log(challenges);
    success(challenges);
  },
  error: function (error) {
    Promise.reject(error);
  }
});

}

Sabemos que los imprime porque en la consola aparece nuestro arreglo lleno, pero en el html nunca entra al ciclo ngFor. Es como si no trajera nada. ¿Hay alguna forma de hacer reload? o ¿De qué forma hago que cargue la información?

angular no muestra servicio Ojalá alguien pueda ayudarme. ¡Muchas gracias!

1

2 respuestas 2

0

Creo que te está imprimiendo el console.log de dentro del servicio y no el de dentro de la llamada de tu ngOnInit.

Tienes el Promise.reject para los errores pero donde tienes el Promise.resolve? Creo que tu error es que no estás devolviendo nada y en la línea de tu componente donde haces

this.challenges = challenges;

seguro que si imprimes challenges es undefined.

La solucion pasaria por devolverlo, con eso debería funcionarte.

0

Lo que sucede es que el constructor se inicia por default y OnInit sólo se inicia una vez y no cambia, es decir, se inicializó el componente y sus variables antes de que cambiaras ese this.challenges por lo que debes utilizar ngOnChanges() el cual es un hook que se va actualizando según lo necesites. Puedes consultarlo aquí: https://angular.io/docs/ts/latest/api/core/index/OnChanges-class.html

De otra manera puedes hacer que se ejecute un método que agregue a tu this.challenges los nuevos valores haciendo push a una lista.

Tu Respuesta

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

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