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

ghybs · Accepted Answer · 2017-03-17 17:08:48Z

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.

answered Mar 17, 2017 at 17:08

ghybs

54.1k6 gold badges90 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FNunez Over a year ago

Thanks, I refactored that part so now the <p> tags are inside the <li>. I'm not getting an error now. However, the issue now is nothing is rendering on the front end. If it put {{ favorites }} outside the *ngFor loop I get [ object Object ]

ghybs Over a year ago

Do you also instantiate your collection on server, and publish that data (or keep autopublish)?

FNunez Over a year ago

I was reading on Meteor.publish and it seems that specifies what is sent to the client. I haven't added that so it must be what I'm missing.

Collectives™ on Stack Overflow

Data display with MeteorJS Collection and Angular 2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related