How to display results in ion-card after clicking a button?


The user is supposed to look for available parking spaces by filling out some information, and then they must click a button to invoke a function. Afterwards, the results are stored inside an array and should be displayed in ion-cards. I want all of these to occur within the same page, but I don’t know how to load the ion-cards after the array has been populated.

My code below:

<ion-content padding>
      <ion-label>Start Time: </ion-label> <ion-datetime [(ngModel)]="reservation.start" pickerFormat="hh:mm A"></ion-datetime>
      <ion-label>End Time: </ion-label> <ion-datetime [(ngModel)]="reservation.end" pickerFormat="hh:mm A"></ion-datetime>
      <ion-label>Nearest to: </ion-label>
      <ion-select [(ngModel)]="category" multiple="False">
        <ion-option *ngFor="let cat of categories" value="{{cat}}">{{ cat }}</ion-option>
  <button ion-button (click)="findSpace(category, start, end)">Find a space</button>

  <ion-card *ngFor="let space of spaces">
        <button ion-button clear right color="default" (click)="reserveSpace()" ngDefaultControl>Select space</button>


findSpace(category: string, start: string, end: string){
    var spaces = new Array();
    const spaceRef: firebase.database.Reference = this.afDatabase.database.ref(`spaces`);
    const reservationRef: firebase.database.Reference = this.afDatabase.database.ref(`reservations`);
    var startTime = moment(start, 'hh:mm');
    var endTime = moment(end, 'hh:mm');

    var promise = new Promise((resolve, reject) => {
      this.afDatabase.database.ref(`categories/${category}`).orderByValue().on('value', function(snapshot){
          if(data.val() === true){
              // console.log("we here");
                var bookingData = childSnapshot.val();
                if(!startTime.isBefore(bookingData.start, bookingData.end)){

    return promise;

I am still quite new to this so suggestions are welcome.