我正在使用Angular2-meteor,它正在使用 Angular2 Beta 1(截至目前)。
我有一个简单的组件,其中包含:
- 添加文档的按钮。显示的新文档带有一个按钮,可通过其 _id 将其删除。
- 还有一个“全部删除”按钮,它循环通过 collection.find() 删除每个文档的 _id。
它大部分工作正常。您可以使用各自的删除按钮添加和删除文档。当您“全部删除”时,它会将它们全部从数据库中删除。游标报告 count() 为 0。新的 collection.find().count() 报告为 0。但它只删除了由客户端上的 *ngFor 显示在模板上的第一个removeAll()
文档。其他文档仍显示在浏览器中。当您重新加载页面时,它会显示数据库的正确内容。其他连接的客户端始终显示正确的集合内容。只有启动的客户端removeAll()
会受到影响。
模板、“全部删除”按钮和 *ngFor 显示文档
<input type="button" value="Remove All" (click)="removeAll()">
<ul>
<li *ngFor="#doc of docs">
<input type="button" value="Remove" (click)="remove(doc._id)">
point: x={{ doc.x }} y={{ doc.y }} _id={{ doc._id }}
</li>
</ul>
组件:
@Component({
selector: 'db-test',
templateUrl: 'client/db-test/db-test.html',
directives: [CORE_DIRECTIVES],
})
export class DbTestComponent{
coll = DbTestCollection;
docs: Mongo.Cursor<Object>;
constructor() {
this.docs = this.coll.find();
}
removeAll() {
this.docs.forEach((d) => {
this.coll.remove(d._id);
});
}
remove(id) {
this.coll.remove({ _id: id });
}
add(point: Point = {x: Math.random(), y: Math.random()}) {
this.coll.insert(point);
}
}