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

#1

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:
reserve.html

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

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

reserve.ts

findSpace(category: string, start: string, end: string){
    console.log("in");
    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){
        snapshot.forEach(function(data){
          if(data.val() === true){
            reservationRef.child(data.key).orderByKey().on('value',function(snapshot){
              // console.log("we here");
              snapshot.forEach(function(childSnapshot){
                var bookingData = childSnapshot.val();
                if(!startTime.isBefore(bookingData.start, bookingData.end)){
                  spaces.push(snapshot.key);                
                  resolve();
                }
              });
            });
          }
        });
      });
    });

    return promise;
    
  }

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