Search code examples
angularfirebaseionic-frameworkhybrid-mobile-app

Display FirebaseListObservable in HTML


I'm very new to Firebase and i have a problem with Firebaselistobservable. I can display the $key in HTML. But is it somehow possible that i can display the numbers 1 / 2 / 3 / 4 also? I have added some pictures below. and i would be verry happy if someone could help me. I'm not even sure whether it's possible.

Firebaselistobservable Console.log
Datas in Firebase

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { FirebaseProvider } from '../../providers/firebase/firebase';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import * as firebase from 'firebase/app';
@Component({
  selector: 'page-daten',
  templateUrl: 'daten.html'
})
export class DatenPage {
  Daten: FirebaseListObservable<any[]>;
  tageszeiten: FirebaseListObservable<any[]>;
  genau: FirebaseListObservable<any[]>;
  Datum: '';
  tageszeit: '';

  constructor(public navCtrl: NavController, public alertCtrl : AlertController,  public fp: FirebaseProvider, public af: AngularFireDatabase, public afAuth: AngularFireAuth) {
    this.Daten = this.fp.getMessungenDaten();
    this.Daten.forEach(datum => {
      console.log('Item:', datum);
   
  });
}
  
}
  <ion-list> 
   <ion-item block on-click="goToNotfallNummernAnzeige(item.newName, item.eNummer);"  *ngFor="let datum of Daten | async">
     {{datum.$key}}
     <ion-item-sliding>
     <ion-item>
       Here i would like to display (1/2/3/4)
     </ion-item>
     <ion-item-options side="left">
       <button ion-button color="danger">delete</button>
     </ion-item-options>
    </ion-item-sliding>
   </ion-item>
   </ion-list>
 

in the End it should look like that:
What it should look like


Solution

  • You should be able to access them by key directly, because your keys are "1", "2", "3" and "4". This is not flexible, but your data always seems to have the same structure.

    Something like this

    <ion-item>
        1 {{datum["1"].blutzuckerwert}}
        2 {{datum["2"].blutzuckerwert}}
        3 {{datum["3"].blutzuckerwert}}
        4 {{datum["4"].blutzuckerwert}}
    </ion-item>