Изменения снимка коллекции угловых Firestore

Question

Я использую FireStore, мне просто нужно отобразить данные списка сбора на компоненте, и рядом с каждым отображаемым элементом можно удалить элемент.

Мне нужно использовать SnapShotChanges (), чтобы получить идентификатор для моего метода удаления.

Вот мой код. Ничто не является консолью, регистрируемой консолью. Я использую 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 документа.

Затем вы можете извлечь фактическое значение документа, используя 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()))
      );
  }
}

---

Вот вам Рабочий образец StackBlitz для вашей ссылки.