2017-12-27 370 views
-1

我正在基於每個對象的ID或$key實現Firebase實時數據庫中的動態路由。我想要的是獲得身份證,我無法找到方式,我得到的值爲undefinied。有任何想法嗎?

enter image description here

enter image description here

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;} 
+3

你需要使用'snapshotChanges爲了得到鍵。檢查此[回答](https://stackoverflow.com/questions/47291644/angular-firebase-5-objects-keys-not-being-displayed-so-cant-delete/47291970#47291970) – Hareesh

+0

優秀爲我工作與'snapshotChanges()' –

回答

0

用方括號來訪問對象的屬性,proyecto['$key']

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

你確定嗎?我仍然出來'undefined' –

+0

post'' proyecto'對象 –

+0

我已經包含了項目project.ts –

0

感謝@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> 

相關問題