2017-06-17 88 views
0

對不起,長期以來的問題。我有一個事件列表,我得到這樣的:Firebase - 檢索單個對象

export class HomePageComponent implements OnInit { 

    events: FirebaseListObservable<EventModel[]>; 

    constructor(
    private authService: AuthService, 
    private router: Router, 
    private db: AngularFireDatabase 
) { 
    this.events = db.list('/events'); 
    } 

    ngOnInit() { 
    } 

} 

事件顯示是這樣的:

<md-card *ngFor="let event of events | async"> 
    <a [routerLink]="['event', event.slug]"><img class="event-img" src="http://lorempixel.com/30/30" />{{ event.name }}</a> 
</md-card> 

event.component看起來是這樣的:

export class EventComponent implements OnInit { 

    event: Object; 
    name: String; 

    constructor(db: AngularFireDatabase, route: Router) { 

    const eventQuery = db.list('/events', { 
     query: { 
     orderByChild: 'slug', 
     equalTo: 'event-name' 
     } 
    }).subscribe(data => { 
     this.event = data[0]; 
    }); 

    } 

    ngOnInit() { 
    } 

} 

this.event完成,正在查詢正確的信息。它看起來像這樣:

Object {category: "category", description: "description", googleMap: "map", guests: Object, name: "Event name"…} 
category: "category" 
description: "description" 
googleMap: "map" 
guests: Object 
name: "Event name" 
slug: "event-name" 
venue: "The venue" 
$exists: function() 
$key: "-xxxxxxxx" 
__proto__: Object 

當我試圖展示我得到一個錯誤的名字{{event.name}}

ERROR TypeError: Cannot read property 'name' of undefined 
at Object.eval [as updateRenderer] 

其他問題:

由於該事件的信息已經在HomePageComponent存在,可以說,它是發送到EventComponent並用於顯示事件?也許這會避免額外的數據庫查詢。

回答

1

使用安全操作?

<md-card *ngFor="let event of events | async"> 
    <a [routerLink]="['event', event?.slug]"><img class="event-img" src="http://lorempixel.com/30/30" />{{ event?.name }}</a> 
</md-card> 
+0

嗨。謝謝你的回答。我將安全運算符添加到了'event.component.html',並且工作正常。我在鏈接所在的'homepage.component.html'中沒有任何錯誤。所以這是有效的。你有沒有注意到我的附加問題? – Ciprian

+0

upvote是否有幫助 – Sajeetharan