【发布时间】:2017-01-20 00:30:50
【问题描述】:
我使用 Angular 2 和 Typescript 的 Meteor 应用程序似乎没有在客户端加载服务器数据:我遵循了这个tutorial,都打开了自动发布和关闭,但每次都有几次尝试在客户端显示数据不同的集合失败。
与教程 (RC4) 不同,我使用的是 Angular 2 RC5。我的客户的 main.ts 如下所示:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
现在我尝试使用集合“派对”复制教程中非常简单的示例(自动发布已打开)。
我创建了文件 both/collections/parties.collection.ts:
import {Mongo} from 'meteor/mongo';
import {Party} from '../interfaces/party.interface';
export const Parties = new Mongo.Collection<Party>('parties');
我没有使用 app.component.ts,而是将集合绑定到另一个现有的功能组件中,如下所示:
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());
}
}
如果我在 mongo 控制台中调用 db.parties.find({});,它会返回三行,因为我已经从示例中设置了服务器端插入。
我的html模板和教程中的一样:
<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()) 返回“0”——同时尝试 Mongo.Cursor 和 Mongo.Cursor。我还尝试获取光标并提醒数组。每次我得到“0”和错误消息“NgFor只支持绑定到诸如数组之类的Iterables。”,但我认为它失败了,因为客户端没有得到服务器拥有的数据。 p>
【问题讨论】:
-
听起来您的
Parties集合在服务器端不可用。您确定它正在被引用/加载服务器端吗?例如,您是否将both/collections/parties.collection导入/server/main.ts之类的内容? -
流星论坛正在讨论这个问题:forums.meteor.com/t/…
标签: mongodb meteor angular typescript