私はAngular2 Beta 1を使用しているAngular2-meteorを使用しています(現在)。
以下を含む単純なコンポーネントがあります。
- ドキュメントを追加するボタン。新しいドキュメントは、その _id で削除するためのボタンとともに表示されます。
- _id によって各ドキュメントを削除する collection.find()をループする [すべて削除] ボタンもあります。
それはほとんど正常に動作します。ドキュメントを追加したり、個別の削除ボタンで削除したりできます。「すべて削除」すると、データベースからすべて削除されます。カーソルは 0のcount() を報告します。新しい collection.find().count() は 0 を報告します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);
}
}