使用MeteorJS Collection和Angular 2显示数据

时间:2017-03-17 14:24:07

标签: javascript angular meteor angular2-meteor

我试图使用Rxjs Observable和.zone()方法从我的MeteorJS mongoDB集合中显示我的角度组件中的数据,但我收到此错误:'无法读取财产' title'未定义'。

我正在使用

从控制台添加数据
db.favorites.insert({
    content: 'Second favorite content',
    title: 'some title',
    subtitle: 'subtitle'
});

任何人都可以看到我失踪的东西或我需要重构的东西吗?注意:我也使用Ionic 2。 感谢。

组件

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

集合

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

1 个答案:

答案 0 :(得分:1)

使用<p>插值等的{{favorite.title}}代码必须是<li>代码模板的子代,您可以在其中定义*ngFor循环和局部变量{{1 }}

favorite未在该循环之外定义。

他们目前是下一个兄弟姐妹,而不是孩子。