Angular Firestore 集合快照更改 [英] Angular Firestore Collection Snapshot Changes

问题描述

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

我需要使用 SnapShotChanges() 来获取我的删除方法的 ID.

这是我的代码.控制台没有记录控制台.我正在使用 Angular 7.

 userCollection: AngularFirestoreCollection;集合:任何；构造函数(私有 afs:AngularFirestore，私有 adminService:AdminServiceService){}ngOnInit() {this.userCollection = this.afs.collection('估值');this.collection = this.userCollection.snapshotChanges().pipe(地图(动作 => {动作.map(a => {console.log(a.payload.doc.data);console.log(a.payload.doc.id);})}))}

这是我的模板:

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

解决方案

当你使用 snapshotChanges AngularFirestore 给你 Document 和 id文档.

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

试试这个:

import { Component } from '@angular/core';从@angular/fire/firestore"导入 { AngularFirestore, AngularFirestoreCollection };从 'rxjs' 导入 { Observable };从'rxjs/operators'导入{地图}；@成分({选择器:'我的应用'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {userCollection: AngularFirestoreCollection;集合:任何；构造函数(私有 afs:AngularFirestore){}ngOnInit() {this.userCollection = this.afs.collection('估值');this.collection = this.userCollection.snapshotChanges().管道(地图(动作 => 动作.map(a => a.payload.doc.data())));}}

<小时><块引用>

这是一个 工作示例 StackBlitz 供您参考.

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.

I need to use SnapShotChanges() in order to get the ID for my delete method.

Here is my code. Nothing is console being console logged. I am on using 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.

You can then extract the actual value of the document using payload.doc.data() on the action.

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.

这篇关于Angular Firestore 集合快照更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！