[英]Angular Firestore Collection Snapshot Changes
I am using FireStore, I simply need to display the collection list data onto the component and next to each item that is displayed be able to delete the item. 我正在使用FireStore,我只需要将收集列表数据显示到组件上,并在显示的每个项目旁边即可删除该项目。
I need to use SnapShotChanges() in order to get the ID for my delete method. 我需要使用SnapShotChanges()来获取删除方法的ID。
Here is my code. 这是我的代码。 Nothing is console being console logged.
没有任何控制台被控制台记录。 I am on using Angular 7.
我正在使用Angular 7。
userCollection: AngularFirestoreCollection<any>;
collection: any;
constructor(private afs: AngularFirestore, private adminService: AdminServiceService) { }
ngOnInit() {
this.userCollection = this.afs.collection<any>('valuation');
this.collection = this.userCollection.snapshotChanges().pipe(
map(actions => {
actions.map(a => {
console.log(a.payload.doc.data);
console.log(a.payload.doc.id);
})
}
))
}
Here is my template: 这是我的模板:
<tbody *ngFor="let o of collection | async">
<tr>
<td scope="row">
{{o.address}}
</td>
<td scope="row">
{{o.name}}
</td>
<td scope="row">
{{o.email}}
</td>
<td scope="row">
{{o.phone}}
</td>
<td scope="row">
<button mat-button color="warn" class="delete" type="button" (click)="delete(o)">Delete</button>
</td>
</tr>
</tbody>
When you use snapshotChanges
AngularFirestore
gives you the Document as well as the id
of the document. 当您使用
snapshotChanges
AngularFirestore
会为您提供文档以及该文档的id
。
You can then extract the actual value of the document using payload.doc.data()
on the action
. 然后,您可以在
action
上使用payload.doc.data()
提取文档的实际值。
Give this a try: 试试看:
import { Component } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userCollection: AngularFirestoreCollection<any>;
collection: any;
constructor(private afs: AngularFirestore) { }
ngOnInit() {
this.userCollection = this.afs.collection<any>('valuation');
this.collection = this.userCollection.snapshotChanges()
.pipe(
map(actions => actions.map(a => a.payload.doc.data()))
);
}
}
Here's a Working Sample StackBlitz for your ref.
这是供您参考的工作样本StackBlitz 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.