如何获取最后一个firebase节点并使用Ionic 2显示它

Question

我已经尝试了几天来显示firebase数据库的最后一个节点。以下3张图片展示了我拥有的和我想要的东西。有人请帮忙。我是初学者。

我搜索了Firebase.google，各种教程并找到了“limitToLast（1）”的代码。 “orderByKey（）”，“firebase.database”但视觉工作室dd无法识别代码。

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { ThreeDay1Page } from '../three-day-1/three-day-1';
import { NotesPage } from '../notes/notes';
import { HistoryBPWGPage } from '../history/historyBPWG';
//import { Storage } from '@ionic/storage';
import { WideGripBPOne, WideGripBPTwo, WideGripBPThree, WideGripBPFour, WideGripBPFive, WideGripBPSix } from "../../data/exercise.interface";

@IonicPage()

@Component({
    selector: 'page-test1-exercise',
    templateUrl: 'test1-exercise.html',
})
export class Test1ExercisePage {

    public buttonClicked: boolean = false;
    public onButtonClick() {
    this.buttonClicked = !this.buttonClicked;
    }

    wideGripBPOne = {} as WideGripBPOne;
    wideGripBPOneRef$: FirebaseListObservable<WideGripBPOne[]>;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private database: AngularFireDatabase) {

        this.wideGripBPOneRef$ = this.database.list('wideGripBPOne-list');
        
    }

    addWideGripBPOne() {
            this.wideGripBPOneRef$.push({
            wtToday: Number(this.wideGripBPOne.wtToday),
            repsToday: Number(this.wideGripBPOne.repsToday),
            newGoalWT:  this.wideGripBPOne.newGoalWT,
            newMinReps: this.wideGripBPOne.newMinReps,
            newMaxReps: this.wideGripBPOne.newMaxReps
        });

          }
}

ion-header>
  <ion-navbar no-padding >
     <ion-title>Bench Press:<br/>wide grip</ion-title>
  </ion-navbar>
  <ion-toolbar class="app-font-20" color="background-color" no-padding>
    <ion-row>
      <ion-col col-10>
        <ion-item color="background-light" class="app-font-22"><b>Targets Outer Pecs</b></ion-item>
      </ion-col>
      <ion-col col-.5>
        <ion-buttons end>
          <button ion-button icon-only round large (click)="onButtonClick()" color="secondary"><ion-icon name=information-circle></ion-icon></button>
        </ion-buttons>
      </ion-col>
    </ion-row>
    <ion-card *ngIf="buttonClicked" color="background-light">
      <ion-card-content class="app-font-18">
        Lay on a bench so that your eyes are directly below a barbell.<br /><br /> With elbows out to the sides and forearms verticle, take an overhand grip of the bar.<br /><br /> Breath deeply and take 3 seconds to lower the bar to mid-chest. Then press the bar back to arms length in 2 seconds.
      </ion-card-content>
    </ion-card>
  </ion-toolbar>
 
   
</ion-header>

<ion-content >
 
  <ion-card class="app-font-16" color="background-color" >
    <!--<ion-card-content>-->

      <ion-item no-padding *ngFor="let item of wideGripBPOneRef$ | async">
        <ion-row>
          <ion-col col-4.01><strong>Goals today:</strong></ion-col>
          <ion-col col-.4>{{item.newGoalWT}}</ion-col>
          <ion-col col-.1><strong>lbs;</strong></ion-col>
          <ion-col col-.2>{{item.newMinReps}} - {{item.newMaxReps}}</ion-col>
          <!--<ion-col col-.1 ><strong>-</strong></ion-col>-->
          <!--<ion-col col-.1>{{item.newMaxReps}}</ion-col>-->
          <ion-col col-.1><strong>reps</strong></ion-col>
      
        </ion-row>
    
        <ion-row>
          <ion-col col-5><strong>Last workout:</strong></ion-col>
          <ion-col col-.4>{{item.wtToday}}</ion-col>
          <ion-col col-.1><strong>lbs;</strong></ion-col>
          <ion-col col-.2 >{{item.repsToday}}</ion-col>
          <ion-col col-.2><strong>reps</strong></ion-col>
          <ion-col col-.2></ion-col>
        </ion-row>
      </ion-item>
    <!--</ion-card-content>-->
  </ion-card>

  <ion-row>
    <ion-col start>
      <img src="assets/img/Wide_grip_bench_press_2.svg.png" />
    </ion-col>
    <ion-col end>
      <img src="assets/img/Wide_grip_bench_press_1.svg.png" />
    </ion-col>
  </ion-row>

 
  <ion-item>
    <ion-label>Weight Today:</ion-label>
    <ion-input type="number" [(ngModel)]="wideGripBPOne.wtToday"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Reps Today:</ion-label>
    <ion-input type="number" [(ngModel)]="wideGripBPOne.repsToday"></ion-input>
  </ion-item>
  

   
      <ion-item-divider color="background-color" text-center><b>Record Any New Goals</b></ion-item-divider>
      <ion-item>
        <ion-label>New Weight Goal:</ion-label>
        <ion-input type="string" [(ngModel)]="wideGripBPOne.newGoalWT"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>New Min Rep Goal</ion-label>
        <ion-input type="string" [(ngModel)]="wideGripBPOne.newMinReps"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>New Max Rep Goal</ion-label>
        <ion-input type="string" [(ngModel)]="wideGripBPOne.newMaxReps"></ion-input>
      </ion-item>
      <button ion-button block (click)="addWideGripBPOne()">Save</button>
   

    <ion-segment padding-left padding-right>
      
      <ion-segment-button (click)="toSet2()" color="background-light" no-padding><b>Next Set</b></ion-segment-button>
      <ion-segment-button (click)="nextexer()"  color="background-light"><b>Next Exercise</b></ion-segment-button>
    </ion-segment><br/>
 
</ion-content>

<ion-footer>
  <ion-toolbar padding-horizontal color="secondary" placement="bottom">
    <ion-row>
      <ion-col>
        <button ion-button (click)="plpd1notes()" color="background-light" round style="zoom:.90;"><h4>Notes</h4></button>
      </ion-col>
      <ion-col>
        <button ion-button (click)="historyBPWG()" color="background-light" round style="zoom:.90;"><h4>History</h4></button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer>