Невозможно показать данные коллекции Mongodb в angular2 с помощью ngFor с метеором angular2

Я очень новичок в mongodb. Я в основном пытаюсь получить данные из коллекции и вывести их на экран. Это приложение angular2-meteor. Я могу вставлять и извлекать данные внутри оболочки mongo. Но когда я пытаюсь перебрать закладки значений, я получаю сообщение об ошибке:

Невозможно найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает привязку только к Iterables, таким как Arrays.

Когда я консоль регистрирую возвращенные данные из метода find (), он возвращает всю коллекцию объектов mongodb, а коллекция boomarks глубоко похоронена внутри объекта.

Как я могу получить массив всех объектов внутри возвращаемой переменной закладок, возвращаемой с помощью метода .find ()?

Мой компонент выглядит следующим образом:

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:

<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>

Снимок ошибки


angular mongodb angular2-meteor
person Sunil Biswakarma    schedule 25.09.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Нашел решение с помощью rxjs: вместо работы с meteor / mongo используйте rxjs и подпишитесь на метод collections.find () mongo. Также при обновлении коллекции 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.

person Sunil Biswakarma    schedule 29.09.2016
comment
Разве синтаксис не неправильный? Bookmarks.find({}).zone().subscribe({ почему {? - person ATX; 16.10.2016

arrow_upward
0
arrow_downward

если вы действительно хотите сделать это с помощью Mongo.Cursor, тогда в вашем коде

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

заменить this.bookmarks=Bookmarks.find();

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

person Amit kumar    schedule 24.10.2016