Ionic: отображение результатов в ионной карте после нажатия кнопки

Question

Пользователь должен искать доступные парковочные места, заполняя некоторую информацию, а затем он должен нажать кнопку, чтобы вызвать функцию.После этого результаты сохраняются в массиве и должны отображаться в ионных картах.Я хочу, чтобы все это происходило на одной странице, но я не знаю, как загрузить ионные карты после заполнения массива.

Мой код ниже: 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;
  }

Я все еще новичок в этом, поэтому предложения приветствуются.Спасибо.

Answer 1

Вы должны определить переменную пробелы в глобальной области видимости (вне какой-либо функции) .Когда вы заполняете массив, Ionic автоматически обновляет его.

var spaces = [];

findSpace(category: string, start: string, end: string){
    console.log("in");
    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');

    let self = this;
    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)){
                  self.spaces.push(snapshot.key);                
                  resolve();
                }
              });
            });
          }
        });
      });
    });

    return promise;
  }