Get $key object realtime database Firebase

Question

I am implementing dynamic routes in Realtime Database of Firebase based on the ID or $key of each object. What I want is to get the ID and I can not find the way, I get the value undefinied. Any ideas?

portafolio.component.html

<div class="container my-5">
<h1>Portafolio</h1>
<div class="row">
    <div class="col-md-4" *ngFor="let proyecto of proyectos | async">
        <div class="card my-3">
            <div class="card-body">
                <h4 class="card-title">{{ proyecto.titulo }}</h4>
                <a class="btn btn-primary" [routerLink]="['/portafolio', proyecto.$key]">Ver detalles</a>
            </div>
        </div>
    </div>
</div>

portafolio.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';


@Component({
  selector: 'app-portafolio',
  templateUrl: './portafolio.component.html',
  styleUrls: ['./portafolio.component.scss']
})
export class PortafolioComponent implements OnInit {

  proyectos: any;

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {

      this.proyectos = this.db.list('proyectos').valueChanges();

  }

}

proyecto.ts

export interface Proyecto {
$key?: string;
titulo?: string;
destacado?: string;
descripcion?: string;}

You need to use snapshotChanges to get the key. Check this answer — Hareesh
– Hareesh, Commented Dec 27, 2017 at 14:39

Paco Zevallos · Accepted Answer · 2017-12-28 00:53:31Z

Thanks to @Hareesh for sharing the related topic: https://stackoverflow.com/a/47291970/8312532

This worked for me:

portafolio.component.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase, AngularFireList} from 'angularfire2/database';
import { Observable } from "rxjs/Observable";



@Component({
  selector: 'app-portafolio',
  templateUrl: './portafolio.component.html',
  styleUrls: ['./portafolio.component.scss']
})
export class PortafolioComponent implements OnInit {

  todosProyectos: AngularFireList<any>;
  proyectos: Observable<any[]>;

  constructor(private db: AngularFireDatabase) { }

  ngOnInit() {

    this. todosProyectos = this.db.list('proyectos');

    this.proyectos = this.todosProyectos.snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    });


  }

}

portafolio.component.html

<div class="container mt-5">
<h1>Portafolio</h1>
<div class="row">
    <div class="col-md-4" *ngFor="let proyecto of proyectos | async">
        <div class="card my-3">
            <div class="card-body">
                <h4 class="card-title">{{ proyecto.titulo }}</h4>
                <a class="btn btn-primary" [routerLink]="['/portafolio', proyecto.key]">Ver detalles</a>
            </div>
        </div>
    </div>
</div>

Sachila Ranawaka · Accepted Answer · 2017-12-27 14:27:51Z

0

Use the square bracket to access the object property, proyecto['$key']

<a class="btn btn-primary" [routerLink]="['/portafolio', proyecto['$key']]">Ver detalles</a>

answered Dec 27, 2017 at 14:27

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

10 Comments

Paco Zevallos Over a year ago

are you sure? I'm still coming out undefined

Sachila Ranawaka Over a year ago

post the proyecto object

Paco Zevallos Over a year ago

I have included the project project.ts

Sachila Ranawaka Over a year ago

print {{ proyecto }} in the html and post the result

Paco Zevallos Over a year ago

the result is [object Object]

|

Collectives™ on Stack Overflow

Get $key object realtime database Firebase

2 Answers 2

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related