Trying to implement dynamic routes in Realtime Database of Firebase based on the ID or $key of each object. Struggling to retrieve the ID, getting an undefined value. Any suggestions?
https://i.sstatic.net/IUwxJ.png
https://i.sstatic.net/K0de3.png
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;}