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?