Meteor's Minimongo does not seamlessly sync up with MongoDB

Despite following the tutorial for my Meteor application using Angular 2 and Typescript, I am facing difficulty loading server data on the client side. Whether autopublish is turned on or off, I have attempted numerous times to display data from different collections on the client side without success.

My current setup uses Angular 2 RC5 instead of the recommended RC4 in the tutorial. Below is an excerpt from my clients' main.ts file:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

I decided to replicate a simple sample from the tutorial with the "parties" collection (autopublish turned on).

I created a new file both/collections/parties.collection.ts:

import {Mongo} from 'meteor/mongo';
import {Party} from '../interfaces/party.interface';
export const Parties = new Mongo.Collection<Party>('parties');

Instead of using app.component.ts, I opted to bind the collection in another functioning component. Here is how it looks:

import { Component } from '@angular/core';
import { Mongo } from 'meteor/mongo';
import template from './my-component.component.html';
import { Parties }   from '../../../both/collections/parties.collection';
import { Party } from '../../../both/interfaces/party.interface';

@Component({
selector: 'my-selector',
template
})

export class MyComponent
{
    parties: Mongo.Cursor<Party>;

    constructor() {
        this.parties = Parties.find();
        alert(this.parties.count());
    }
}

Checking db.parties.find({}); in the mongo console returns three rows due to server-side inserts made from the tutorial's sample code.

The html template mirrors that of the tutorial:

<ul>
<li *ngFor="let party of parties">
  <a [routerLink]="['/party', party._id]">{{party.name}}</a>
  <p>{{party.description}}</p>
  <p>{{party.location}}</p>
  <button (click)="removeParty(party)">X</button>
</li>

The error occurs when alert(this.parties.count()) returns "0", stating "NgFor only supports binding to Iterables such as Arrays.". This issue seems to arise because the client fails to retrieve the data stored on the server.

Answer №1

The problem mentioned above is now resolved in the latest releases of angular2.0-meteor.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Custom ControlValueAccessor in Angular is unable to manage arrays efficiently

I've created a custom ControlValueAccessor to handle an array as its value. import { Component, forwardRef, Input } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @Component({ sel ...

Tips for preventing the need to cast a DOM element to any in Typescript

In my Typescript code, I am retrieving the value of a DOM element like this: document.getElementById('MyElementId') as HTMLElement).value I feel unsure about casting it to HTMLElement. Is there a better way to specify the type and retrieve this ...

Discovering the category for ethereum, provider, and contract

My current interface looks like this: interface IWeb3 { ethereum?: MetaMaskInpageProvider; provider?: any; contract?: any; }; I was able to locate the type for ethereum using import { MetaMaskInpageProvider } from "@metamask/providers", ...

Querying MERN stack to retrieve historical data from database using date filtering

MongoDB: I have a table in Mongo with timestamps attribute set. The database automatically creates the following dates while saving the documents. https://i.sstatic.net/lUzWx.png Request: When querying for the documents from the UI, the request valu ...

Unable to utilize checkboxes for filtering in Angular 2 and beyond

I am working on a project that involves showcasing a list of participants. My goal is to set up a feature that allows filtering these participants based on different providers using checkboxes in real-time. Below is a sample of the participants: [ { ...

Should one consider running continuous queries on a MongoDB database?

When working with an SQL database, accessing nested data like a list of tags or categories for each table item can require using complex joins to send a single SQL query and then loop through the result cursor. So my question is, when using a NoSQL databa ...

Is the scrolling functionality acting strange while using React Three Fiber?

In my React Three Fiber application, I have the following structure: Website Canvas NativeHTMLContent Canvas Website The issue I'm facing is that after scrolling down the entire canvas, the scrollbar resets to the top and starts scrolling from the t ...

The 2-way data binding feature in AngularJS is failing to function when used with a factory in a MEAN stack application

I am currently in the process of creating a single-page application that displays files from my local MongoDB database. However, I have encountered an issue where AngularJS is not displaying the data properly. When I retrieve the files using Postman to acc ...

Angular is unable to access a service method through an observable subscription

Currently, I have a code for my service like this: cars() { return 'something here'; } Next, in order to retrieve the data using an observable from the component, I am attempting the following: getcars() { this.dataService.cars().subsc ...

Transfer text between Angular components

Here is the landing-HTML page that I have: <div class="container"> <div> <mat-radio-group class="selected-type" [(ngModel)]="selectedType" (change)="radioChange()"> <p class="question">Which movie report would you like ...

Using TypeScript to interpret JSON - insert a 'data' label

Consider the following example of a JSON structure: [ { "id":1, "position":3, "articleNumber":"ServiceElement" }, { "id":2, "position":2, "articleNumber":"ServiceElement" } ] Is there a way to transfo ...

Debugger for Visual Code unable to locate URL in Microsoft Office Add-in

I recently installed the Microsoft Office Add-in Debugger VS code extension, but I'm having trouble getting it to work despite following the instructions. Every time I try, an error message pops up: https://i.sstatic.net/h2FYs.png Upon inspecting my ...

Tips for retrieving a child component's content children in Angular 2

Having an issue with Angular 2. The Main component displays the menu, and it has a child component called Tabs. This Tabs component dynamically adds Tab components when menu items are clicked in the Main component. Using @ContentChildren in the Tabs comp ...

Steps for modifying the value of a field within an Angular formGroup

Is there a way to update the value of the "send_diagnostic_data" field in a separate function? private generateForm(): void { this.messageForm = new FormGroup({ message: new FormControl(''), date: new FormControl(new Date()), messag ...

Finding the scope of dynamically generated fields in AngularJS has proven to be quite challenging

I'm currently working on creating a dynamic form where users can add input fields by clicking a button. However, I am facing issues with fetching the value of the input field in the controller. Below is my form: <div ng-repeat="skill in skill_set" ...

The issue at hand is that web components within Angular are failing to register changes

I have created a custom element for a todo item using custom element js. I am using this custom element in an Angular file and able to pass properties. The issue I am facing is that whenever I add or delete a new item, it's not reflecting in the custo ...

Experiencing difficulties applying a condition in a mongoDB projection

Imagine a scenario where I have a separate collection named 'Collection1' containing the following data: userID: "1" container:[ {"item" : "false", "price" : NumberDecimal("80"), "sizes" : "S", "arrayIndex" : NumberLong(0) } {"item" : ...

Incorporating HTTP status codes into error handling

I have developed an API where I've organized the services separately from the controllers. In my service functions, I've included basic checks to trigger errors when certain conditions are met. Currently, my controller function just returns a 500 ...

How to effectively filter a JSON array using multiple keys?

I need help filtering my JSON data by finding the objects with key 'status' equal to 'p' within the lease array. I attempted to use the following function, but it did not achieve the desired result: myActiveContractItems.filter((myActiv ...

How can I effectively monitor a group of ongoing observables in RxJS that have not yet finished?

I have a series of TypeScript observables (Observable<boolean>) that emit multiple times and then complete. I need to remove these observables from a collection once they complete, but while they are still active, I require access to their latest val ...