获取 $key 对象实时数据库 Firebase

Question

我正在基于每个对象的 ID 或$key在 Firebase 的实时数据库中实现动态路由。 我想要的是获取 ID 而我找不到方法，我得到的值undefinied 。 有任何想法吗？

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(); } }

项目

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

Answer 1

感谢@Hareesh 分享相关主题： https ://stackoverflow.com/a/47291970/8312532

这对我有用：

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>

Answer 2

使用方括号访问对象属性， proyecto['$key']

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