Angular Firestore集合快照更改

Question

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

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

这是我的代码。 没有任何控制台被控制台记录。 我正在使用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);
        })
      }
    ))
  }

这是我的模板：

<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>

Answer 1

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

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

试试看：

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

---

这是供您参考的工作样本StackBlitz 。