Show values of my query service made in Parse in Angular 2?

We are making an application in which we use Angular 2 and Parse for the back. In the application we save projects or "challenge" as our object is called and now we want to show them in an angular component.

The problem is that although an arrangement with the result we need is already coming back, it is not showing the results in the .html.

This is the .html where we want to show the list of active challenges we get from a service:

 <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>

This component calls our challenge.service getActiveChallenges service on the 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);
  });
}

}

And finally this is the service that is returning and the arrangement with the results.

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);
  }
});

}

We know that it prints them because in the console our array appears full, but in the html it never enters the ngFor cycle. It's as if he did not bring anything. Is there any way to do reload? o In what way do I upload the information?

I wish someone could help me. Thank you very much!