Apologies for the lengthy question. I have a collection of events that I retrieve like this:
export class HomePageComponent implements OnInit {
events: FirebaseListObservable<EventModel[]>;
constructor(
private authService: AuthService,
private router: Router,
private db: AngularFireDatabase
) {
this.events = db.list('/events');
}
ngOnInit() {
}
}
The events are shown in the following format:
<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>
The event.component is structured as follows:
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() {
}
}
The this.event object contains all relevant details and the correct data is being retrieved. It has the following structure:
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
However, when attempting to display {{event.name}}, an error is encountered:
ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateRenderer]
Additional inquiry:
Given that the event information is already available in HomePageComponent, is it possible to pass this data to EventComponent for display? Doing so may eliminate the need for an extra database query.