离子：单击按钮后在离子卡中显示结果

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