Angular2 -meteor - Undefined variable after search () with sorting in the subscription function

Question

I am new to Meteor and the angular2 -meteor package, and I am trying to learn how to use them according to the well-prepared tutorial for the Social app found here: Social Turikul .

During experiments with what I saw there about the Publish / Subscribe functions, I discovered a problem that I do not know how to solve. To be clear, I made a very simple project with this structure:

/typings/test.d.ts

interface Test {    
    _id?: string;
    num: number;
}

/collections/tests.ts

export var Tests = new Mongo.Collection<Test>('tests');

/server/main.ts

import './tests';

/server/test.ts - just publishes everything

import {Tests} from 'collections/tests'; 

Meteor.publish('tests', function() {
    return Tests.find();
});

/client/app.ts - subscribe to sort results

import {Component, View} from 'angular2/core';

import {bootstrap} from 'angular2-meteor';

import {MeteorComponent} from 'angular2-meteor';

import {Tests} from 'collections/tests';

@Component({
    selector: 'app'
})

@View({
    templateUrl: 'client/app.html'
})

class Socially extends MeteorComponent {
    tests: Mongo.Cursor<Test>;

    constructor(){
        super();      
        this.subscribe('tests', () => {
            this.tests = Tests.find({}, {sort: {num: -1}});
        }, true);
    }
}

bootstrap(Socially);

/client/app.html - a simple ngFor showing the results

<div>
    <ul>
        <li *ngFor="#test of tests">
            <p>{{test._id}}</p>
            <p>{{test.num}}</p>
        </li>
    </ul>
</div>

Mongo, . , . , , "num" , , , , :

: TypeError: l_test0 undefined [{{test._id}} Social @@: 15]

, :

• id: 1 - num: 6

• id: 2 - num: 5

• id: 3 - num: 4

"num" 4, "num" 7, :

• id: 3 - num: 7
• id: 1 - num: 6
• id: 2 - num: 5

.

, , , , , .

.

EDIT: / . , mongo:

db.tests.insert({_ id: 1, num: 6})

db.tests.insert({_ id: 2, num: 5})

db.tests.insert({_ id: 3, num: 4})

db.tests.update({_ id: 3}, {$ set: {num: 7}})

:

db.tests.find()

:

{ "_id" : 1, "num" : 6}

{ "_id" : 2, "num" : 5}

{ "_id" : 3, "num" : 7}

Answer 1

: , ​​ angular2 -meteor@0.5.1! Mongo.Cursor.

, sort tests:Mongo.Cursor<Test> *ngFor . *ngFor Mongo.Cursor angular2 -. Angular 2 .

fetch() Array<Test>, :

"XXX" undefined

, :

<div *ngFor="#test of tests">

</div>

// here you cannot use tests:Mongo.Cursor<Test>
tests:Array<Test>;
constructor() {
    super();
}
ngOnInit()
{
    this.subscribe('tests', () => {
        // autorun makes sure it get latest data
        this.autorun(() => {
            // here you need fetch first
            this.tests = Tests.find({}, {sort: {num: -1}}).fetch();
        }, true);
    });
}

issue github

Answer 2

, , , .

, , , :

this.tests.observeChanges({changed: () => {
    this.tests = Tests.find({}, {sort: {num: -1}});
}})

, , , , .

, undefined, ngIf:

<li *ngFor="#test of tests" *ngIf="test">

Edit

, . ngFor ngIf, , ngFor ngIf , , -, , ngIf <template>:

<template *ngIf="tests">
    <li *ngFor="#test of tests">
</template>

, , , .