Cant access values on a list on firebase

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

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.

Thanks Mr. Sterling!!!