2016-09-25 7 views
0

私はmongodbの新機能です。私は基本的にコレクションからデータを取得して画面に表示しようとしています。その角2 - 流星のアプリ。私はmongoシェルの中にデータを挿入して取り出すことができます。私は価値のブックマークをループしようとすると、しかし、私はエラーを取得:私はfind()メソッドから返されたログデータを慰めるときnogForとangular2の流星を使ってMongodbコレクションデータをangular2に表示できません

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

、それは全体のMongoDBはコレクションとboomarksコレクションが深く埋設されているオブジェクトを返します。オブジェクトの内部。

返されたブックマーク変数内のすべてのオブジェクトの配列を.find()メソッドを使用して返すにはどうすればよいですか?

私のコンポーネントは以下の通りです:rxjsを使用して解決策を見つけた

<tbody> 
    <tr *ngFor="let bookmark of bookmarks"> 
     <td>{{bookmark.title}}</td> 
     <td>{{bookmark.url}}</td> 
     <td>{{bookmark.category}}</td> 
     <td><button class="btn btn-danger">Delete</button></td> 
    </tr> 
</tbody> 

Error Snapshot

答えて

2

: 代わりの流星/モンゴでの作業ここ

import { Component } from '@angular/core'; 
import template from './bookmarks.component.html'; 
import { Bookmarks } from '../../../../collections/bookmarks'; 
import { Mongo } from 'meteor/mongo'; 
@Component({ 
    selector: 'bookmarks-list', 
    template 
}) 
export class bookmarksListComponent { 
    bookmarks: Mongo.Cursor<Object>; 
    constructor() { 
    this.bookmarks=Bookmarks.find(); 
    console.log(this.bookmarks); 
    } 
} 

は、HTMLテンプレートですrxjsを使用し、mongoのcollections.find()メソッドに登録します。またNEWINGアップのmongoコレクション使用MongoObservable.collections全体のコード中:

bookmarks.component.ts:

import "reflect-metadata"; 
import { Component, OnInit, NgZone } from '@angular/core'; 
import template from './bookmarks.component.html'; 
import { Bookmarks, bookmark } from '../../../../collections/bookmarks'; 
import { Observable } from 'rxjs'; 
@Component({ 
    selector: 'bookmarks-list', 
    template 
}) 
export class bookmarksListComponent implements OnInit{ 
    private bookmarks: bookmark[]; 
    constructor(private zone: NgZone) { 
    } 
    ngOnInit(){ 
    Bookmarks.find({}).zone().subscribe({ 
     next: bookmarks => { 
     console.log("Got Bookmarks: ", bookmarks); 
     this.bookmarks=bookmarks; 
     } 
    }); 
    } 
} 

Bookmarks.ts(コレクション)

import { MongoObservable } from 'meteor-rxjs'; 
export interface bookmark { 
    title: string; 
    url: string; 
    category: string; 
} 
export const Bookmarks= new MongoObservable.Collection<bookmark>('bookmarks'); 

Angular2- rxjs-meteor: このレポからの助けを求めるhttps://github.com/ijager/meteor-rxjs-angular2.0.0-example.git

+0

aintの構文が間違ってthis.bookmarks=Bookmarks.find();

を交換? 'Bookmarks.find({})。zone()。subscribe({'なぜ '{'? – ATX

0

あなたが本当にあなたのコード内で、その後Mongo.Cursorを使用してそれを実行したい場合は

constructor() { 
this.bookmarks=Bookmarks.find(); 
console.log(this.bookmarks); 
    } 

this.bookmarks=Bookmarks.find({}).fetch();

関連する問題