My Meteor application using Angular 2 and Typescript seems not to load the server data on the client side: I have followed this tutorial, both with autopublish turned on and of, but each time several tries to display data on client side with different collections failed.
Unlike in the tutorial (RC4), I am using Angular 2 RC5. My clients' main.ts looks as following:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
Now I tried to copy the very simple sample from the tutorial using the collection "parties" (autopublish turned on).
I created the 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 the app.component.ts, I bind the collection in an another existing and functional component which looks like following:
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());
}
}
If I call db.parties.find({}); in the mongo console, it returns three rows, because I have set up the server side inserts from the sample.
My html template is the same as in 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>
alert(this.parties.count()) returns "0" - both trying Mongo.Cursor and Mongo.Cursor. I have also tried to fetch the cursor and to alert the array. Each time I get "0" and the error message "NgFor only supports binding to Iterables such as Arrays.", but I think it fails because the client does not get the data the server has.
This is no more an issue on recent versions of angular2.0-meteor.
Related
I have the following model:
import { Model } from '#vuex-orm/core'
export class User extends Model {
static entity = 'users'
static fields () {
return {
id: this.attr(null),
name: this.attr('')
}
}
}
and when I try to do this:
User.insert({
data: { id: 1, name: 'John' }
})
I get the following error:
Uncaught (in promise) TypeError: Class constructor User cannot be invoked without 'new'
Any idea what is the problem? This code is from the documentation, so I'm confused a little bit.
as I can see you are missing the registration of the model in the database at the beginning of the application.
You have to implement your vuex store with the corresponding plugin
EXAMPLE:
import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from '#vuex-orm/core'
import User from '#/models/User'
import Post from '#/models/Post'
Vue.use(Vuex)
// Create a new instance of Database.
const database = new VuexORM.Database()
// Register Models to Database.
database.register(User)
database.register(Post)
// Create Vuex Store and register database through Vuex ORM.
const store = new Vuex.Store({
plugins: [VuexORM.install(database)]
})
export default store
You now have good documentation in this regard
I hope I have helped you, greetings
This question already has answers here:
Ionic 4. Alternative to NavParams
(8 answers)
Closed 4 years ago.
I would like to pass a JSON object to another page. What I've tried is to pass the JSON string using Angular router ActivatedRoute like this:
this.router.navigate(['details', details]);
and then retrieve it like this:
import { ActivatedRoute } from '#angular/router';
constructor(private activatedRoute: ActivatedRoute) {
}
ngOnInit() {
this.activatedRoute.params.subscribe(extras => {
console.log(extras);
this.JSONObject = extras;
});
}
It is possible to do it this way but what happened was the nested JSON objects becomes inaccessible. It turns into this string:
"[object Object]"
The stringified JSON object is fine and accessible before I pass it. Another problem is that it appends the JSON string to the url so it doesn't look that nice. From what I read as well, it is not a good practice to pass something more than just an id this way.
I am thinking of something like passing objects as intent extras between activities in Android. I've searched the documentations, forums, and previous stackoverflow questions but I didn't found any solution that enables me to achieve this. Is there any other way of passing objects between pages using Angular router in Ionic4?
I solved it using a service with a simple setter and getter just like in this question that I later found:
Ionic 4. Alternative to NavParams
First, I create a service with setter & getter:
import { Injectable } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class NavExtrasService {
extras: any;
constructor() { }
public setExtras(data){
this.extras = data;
}
public getExtras(){
return this.extras;
}
}
Let's say I'm navigating from page A to page B, in page A:
this.navExtras.setExtras(extras)
this.router.navigateByUrl('page-b');
Then in Page B, I retrieve the extras this way:
this.location = navExtras.getExtras();
It works so far although I'm still not sure if there are better ways to do it..
I would like to use sails.io.js with angular5, so I used angular2-sails module. I managed to connect angular to sails but I didn't manage to retrieve the events from sails.js, for example when a new document is created in database. Is there something to configure sails side ? I used this.sailsService.on("user").subscribe(data => console.log("event on user")). The get and post methods are perfectly working. Sails side I put
ioclient: require('socket.io-client')('http://localhost:1337'),
io: require('sails.io.js'),
In config/http.js, instead of
var io = require('sails.io.js')( require('socket.io-client') );
because else sails cannot load
I didn't write anything in config/socket.js
angular2-sails module is deprecated so I used the io variable from sails.io.js using a service :
import {Injectable} from '#angular/core';
function _window(): any {
// return the global native browser window object
return window;
}
#Injectable()
export class SocketService {
get ioSails(): any {
return _window().io;
}
}
I'm creating a quiz making/sharing website using angular2 but am not sure how to share the quizzes. i was thinking of using each of my quizzes identifiers as URLs. The quizzes are made using forms and are saved on a docmentdb as JSON. they have unique ID's to identify them. Any ideas as to how i could do this?
Those URLs must be dynamically created, as new quizzes can be submitted and thereafter accessed.
You can use the same base url for your page with quiz, but differentiate quizzes by path parameter like:
quizsite.com/#/quiz/12 (12 being quiz id)
Inside your component you can read what path parameters are located in your url and their values by accessing ActivateRoute object:
Component
import { Component } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
#Component({
templateUrl: 'quizComponent.html',
})
export class QuizComponent {
constructor(private activatedRoute: ActivatedRoute){}
ngOnInit() {
// Reason for this being a observable is that you can watch
parameter changing (manually in url, or programmatically)
and without any page refresh, read new parameter and change you quiz
this.activatedRoute.params.subscribe(params => {
console.log(params.quizId);
// With this parameter you can make call to your REST API and return
data for that quiz
});
}
}
Okay, so, I have a component with a function getPhotos(), which is taking in a string from parent props:
import React, { Component, PropTypes } from 'react';
// data
import { Cats } from '../api/collections/galleries.js';
export default class...
getPhotos() {
let gallery = this.props.galleryName; // gallery = "Cats"
Now, I want to use this string "Cats" to access a collection from mongo db, so I tried using window["Cats"], but I don't think it is on the window object:
let photoData = window[gallery].find().fetch(); // window[Cats] and window["Cats"] returns undefined
return photoData;
}
Everything in meteor seems to be working, publish and subscribe.
Any ideas how I can do this using React components?
You can do
Meteor.connection._stores[gallery]._getCollection().find().fetch();