Angular2-meteor变量-订阅函数中具有排序的find()之后未定义

Question

我对Meteor和angular2-meteor软件包很陌生，我正在尝试学习如何使用它们，遵循这里发现的“社交”应用教程：社会文化。

在对发布/订阅函数进行实验时，我发现了一个我不知道如何解决的问题。为了说明清楚，我用这个结构做了一个非常简单的项目：

/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“字段中添加更多的条目，使其切换位置，应用程序就会停止正常工作，浏览器控制台会说：

例外: TypeError: l_test0在社交@3:15中{{test._id}中未定义

例如，如果我有：

• 编号:1- num: 6
• 编号:2- num: 5
• 编号:3- num: 4

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

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

这让我犯了这个错误。

这可能是愚蠢的，但由于我是一个真正的新手与流星，我似乎无法理解什么是错的，我会很高兴，如果你能帮助我。

提前谢谢你。

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

UPDATE：检查这里，bug已经修复，因为angular2-meteor@0.5.1！您现在可以使用Mongo.Cursor了。

问题是，当使用sort和列表更改时，您现在不能在*ngFor中使用tests:Mongo.Cursor<Test>。*ngFor不完全支持Mongo.Cursor在安古拉2-流星。所以你需要使用纯角度的2路。

您首先需要fetch()并使用Array<Test>，否则当列表或列表顺序发生变化时，它将显示此错误：

无法读取未定义的属性'XXX‘

最后的工作代码是这样的：

<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);
    });
}

参考github上的问题

Answer 2

我希望有一个更好的答案，但我有同样的问题，并一直在尝试一些事情。

我发现，如果我在自动运行程序中向游标添加了一个观察者，那么所有的操作都会按照预期进行：

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

基于我所读到的每一篇文章，这似乎并不是必要的，但它确实对我有用。

为了防止它试图在光标中显示短暂结束为undefined的文档，我添加了一个ngIf

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

编辑

我一直有一些问题，这是很难确定。在阅读ngFor和ngIf上的这个问题之后，我猜想这是因为我在相同的元素上有ngFor和ngIf，这显然是不受支持的。相反，他们建议将ngIf移动到一个封闭的<template>标记上：

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

然而，这揭示了洪波的回答所涉及的根本问题。