流星Angular2和Mongodb的外部更改

Question

I play around with a simple Meteor Angular 2 app which only read from database. I have another app which change the database. But when the database is changed, I got error on Meteor app.

Exception in queued task: EXCEPTION: Error in client/match.html:0:19
ORIGINAL EXCEPTION: TypeError: Cannot read property 'league' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'league' of undefined
at DebugAppView._View_MatchComponent0.detectChangesInternal (MatchComponent.template.js:101:59)
at DebugAppView.AppView.detectChanges (http://localhost:3001/packages/modules.js?hash=5bea6cc36ccb7076b2a2834b250a3c141ff0cd78:57326:14)
at DebugAppView.detectChanges (http://localhost:3001/packages/modules.js?hash=5bea6cc36ccb7076b2a2834b250a3c141ff0cd78:57415:44)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3001/packages/modules.js?hash=5bea6cc36ccb7076b2a2834b250a3c141ff0cd78:57346:34)
at DebugAppView._View_MatchesComponent1.detectChangesInternal (MatchesComponent.template.js:106:8)
at DebugAppView.AppView.detectChanges (http://localhost:3001/packages/modules.js?hash=5bea6cc36ccb7076b2a2834b250a3c141ff0cd78:57326:14)
at DebugAppView.detectChanges (http://localhost:3001/packages/modules.js?hash=5bea6cc36ccb7076b2a2834b250a3c141ff0cd78:57415:44)
at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3001/packages/modules.js?hash=5bea6cc36ccb7076b2a2834b250a3c141ff0cd78:57341:37)
at DebugAppView._View_MatchesComponent0.detectChangesInternal (MatchesComponent.template.js:65:8)
at DebugAppView.AppView.detectChanges (http://localhost:3001/packages/modules.js?hash=5bea6cc36ccb7076b2a2834b250a3c141ff0cd78:57326:14)
ERROR CONTEXT:
[object Object]

I'm using autopublish which collection:

import {Mongo} from 'meteor/mongo';
export let MatchCollection = new Mongo.Collection('matches');

And angular component:

export class MatchesComponent
{
    matches;
    constructor() {
        this.matches = MatchCollection.find();
    }
}

Note: Meteor Blaze version works well. And I'm new to Meteor Angular2.

Thanks for all help.

Answer 1

I guess you are using *ngFor .

You can use this more stable way

this.matches = MatchCollection.find().fetch();

MatchCollection.find(); returns Mongo.Cursor<any> ;

MatchCollection.find().fetch(); returns Array<any>

Weird, the bug should be already fixed...

Answer 2

It looks like the external change removed a property names league within the document, which your angular2 view uses somewhere.

Have a look at the document via meteor mongo to see how the document looks like in the storage before and after it has been modified by the external process.