Data display with MeteorJS Collection and Angular 2

Question

I'm trying to use the Rxjs Observable along with the .zone() method to display data in my angular component from my MeteorJS mongoDB collection but I'm getting this error: 'Cannot read property 'title' of undefined'.

I'm adding data from the console using

db.favorites.insert({
    content: 'Second favorite content',
    title: 'some title',
    subtitle: 'subtitle'
});

Can anyone see what I'm missing or what I would need to refactor ? Note: I'm also using Ionic 2. Thanks.

Component

import { Component, ViewChild, Input, Output, EventEmitter, OnChange, Injectable} from '@angular/core';
import { Platform, ViewController, NavController, NavParams } from 'ionic-angular';
import { ProfileHeader } from '../profile-header/profile-header';
import { ContentPage } from '../../library-pages/content';
import { Observable } from 'rxjs/Observable';
import style from './profile-favorites-view.scss';

//Collection import
import { Favorites } from '../../collections/favorite';

@Component({
  directives: [ContentPage],
  template: `
  <profile-header></profile-header>
  <ion-content class="profile-option-content">
    <section class="profile-option-title-container">
    <h2 class="main-title">My favorites</h2>
  </section>

  <div>
    <ul>
      <li *ngFor="let favorite of favorites | async"></li>
      <p>{{ favorite.title }}</p>
      <p>{{ favorite.subtitle }}</p>
      <p>{{ favorite.content }}</p>
    </ul>
  </div>
  `,
  styles: [ style ]
})

export class ProfileFavorite {
  favorites: Observable<any[]>;

  constructor(public navCtrl: NavController) {
    this.favorites = Favorites.find({}).zone();
  }
}

Collection

import { Meteor } from 'meteor/meteor';
import { Mongo } from 'meteor/mongo';
import { MongoObservable } from 'meteor-rxjs';

export type FavoritesTask = {
  _id? : string,
  content : string,
  subtitle : string,
  title : string
}

export const Favorites = new MongoObservable.Collection<FavoritesTask>( 'favorites' );

Favorites.allow({
  insert() { return true; },
  update() { return true; },
  remove() { return true; }
});

Favorites.deny({
  insert() { return false; },
  update() { return false; },
  remove() { return false; }
});

Answer 1

The <p> tags where you use {{favorite.title}} interpolation and the like must be children of the <li> tags template where you define your *ngFor loop and local variable favorite.

favorite is not defined outside of that loop.

They are currently next siblings, not children.