Cant access values on a list on firebase

Ionic Framework ionic-v3
1

I have a list of items I need to show on the screen.

But the main problem is… These values are stored using authentication, this means that if I log as use A, there will be user A’s saved items, if I log as user B, there will be user B’s different from A’s saved item.

I cant show the items using the ngFor because I need to pass the authentication node to show that particular user’s items.

How can I do this?

the html code

<!--
  Generated template for the AgendaPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Agenda</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <ion-list>
        <ion-list-header>
          Consumo
        </ion-list-header>
        <ion-item *ngFor="let item of calculoList$ | async">
          Litros Abastecidos: {{item.litros}} <br/>
          Valor Pago: R$ {{item.valorPago}} <br/>
          Consumo Médio do Carro: {{item.resultado}} km/l
        </ion-item>
      </ion-list>
</ion-content>

the .ts code

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { Calculo } from '../../models/calculo';
import { calculoService } from '../../services/lista-calculo/calculoService';
import { HomePage } from '../home/home';

/**
 * Generated class for the AgendaPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-agenda',
  templateUrl: 'agenda.html',
})
export class AgendaPage {

  calculoList$: Observable<Calculo[]>

  constructor(public navCtrl: NavController, public navParams: NavParams,
    private calculo: calculoService) {
    this.calculoList$ = this.calculo
        .getCalculoList()
        .snapshotChanges()
        .map(
          changes => {
            return changes.map(c => ({
              key: c.payload.key, ...c.payload.val()
            }))
          }
        )
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AgendaPage');
  }

}

the service code

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Calculo } from '../../models/calculo';
import { AngularFireAuth } from 'angularfire2/auth';

@Injectable()
export class calculoService{
    
    private calculoListRef = this.afDatabase.list<Calculo>('consumo');

    constructor(private afDatabase: AngularFireDatabase, private afAuth: AngularFireAuth, ){

    }

    getCalculoList(){
        return this.calculoListRef;
    }

    addItem(calculo: Calculo){
        return this.afAuth.authState.take(1).subscribe(auth => {
            this.afDatabase.list(`consumo/${auth.uid}`).push(calculo)
          })
    }
}

I want the items inside “consumo”->“b1AnCjVh7Laj1nvRgkt9Zio1URr1” to show

42
07

2

First, use Firestore, not Firebase, unless there is an extra special reason you need Firebase.

Second, set up your access rules so both users can read from the same node. I divide my User object into PublicUserData and PrivateUserData, and have different backend access rules for each.

3

Thanks Mr. Sterling!!!