mongodb - Angular2-meteor - 在订阅函数中使用排序的 find() 后变量未定义

Question

我是 Meteor 和 angular2-meteor 包的新手，我正在尝试按照此处提供的制作精良的“社交”应用程序教程学习如何使用它们:Socially turorial .

在试验我在那里看到的有关发布/订阅功能的内容时，我发现了一个我不知道如何解决的问题。为了清楚起见，我用这种结构做了一个非常简单的项目:

/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 - 只是发布所有内容

import {Tests} from 'collections/tests'; 

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

/client/app.ts - 订阅排序结果

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 - 一个简单的 ngFor，显示结果

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

如果我使用 Mongo 控制台在数据库中插入或删除条目，一切正常。如果我更新现有条目而不更改它们的顺序，情况也是一样。但是，如果我尝试更新其中一个已存在的条目，在其“num”字段中放置一个更高的数字，使它们切换位置，应用程序将停止正常工作，并且浏览器控制台会显示:

EXCEPTION: TypeError: l_test0 is undefined in [{{test._id}} in Socially@3:15]

例如，如果我有:

• id: 1 - num: 6

• 编号:2 - 编号:5

• 编号:3 - 编号:4

然后我尝试用“num”4 将“num”改为 7 来更新条目，新结果应该是:

• 编号:3 - 编号:7
• 编号:1 - 编号:6
• 编号:2 - 编号:5

这给了我上述错误。

这可能很愚蠢，但由于我是 meteor 的真正新手，我似乎不明白出了什么问题，如果你能帮助我，我会很高兴。

提前谢谢你。

编辑:在我原来的项目中，我使用了一个表单来直接从页面添加/删除条目。在这个测试项目中，我删除了所有不必要的东西以使其尽可能简单，并使用了 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

更新:检查here ，自 angular2-meteor@0.5.1 以来，该错误已修复!您可以使用 Mongo.Cursor现在。

问题是当使用 sort 时并且列表发生变化，您不能使用 tests:Mongo.Cursor<Test>与 *ngFor马上。 *ngFor不支持 Mongo.Cursor完美的angular2-meteor。所以你需要使用纯 Angular 2 方式。

你需要fetch()首先使用Array<Test> , 否则当列表或列表顺序发生变化时会显示此错误:

Cannot read property 'XXX' of 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在知乎上