Question

我正在使用FireStore，我只需要在组件上显示收集列表数据，并在显示的每个项目旁边即可删除该项目。

我需要使用SnapShotChanges（）才能获取删除方法的ID。

这是我的代码。没有任何控制台被控制台记录。我正在使用Angular 7。

SUM(CASE WHEN dateResolved IS NOT NULL 
         THEN 1 ELSE 0 
    END) / DISTINCT(dateResolved) AvgPerDay

这是我的模板：

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

Answer 1

使用snapshotChanges时AngularFirestore会为您提供文档以及文档的id。

然后您可以使用payload.doc.data()上的action提取文档的实际值。

尝试一下：

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

这是您推荐的Working Sample StackBlitz。

Angular Firestore集合快照更改

1 个答案: