时间戳

首页 > 解决方案 > AngularFirestore 数据库，HTML 表在数据更改时不会自动更新

angular - AngularFirestore 数据库，HTML 表在数据更改时不会自动更新

问题描述

我可以通过正确的过滤和分页成功加载我的数据。问题是每当更新 Firestore 数据库时，表都不会自动加载或更新。我需要刷新页面才能在表格中显示新数据。

这是我的Service.ts

export class ExtractorService {

  constructor(private fstore: AngularFirestore) {}

  //Get all the data in the "sample" collection.
  dbFirestore() {
      return this.fstore.collection('sample').snapshotChanges();
  }

这是我加载数据的component.ts。

export class SampleComponent implements OnInit {


  filter = new FormControl('');

  sampleData: Observable < any[] > ;
  private questions: any[];

  constructor(private extractorService: ExtractorService) {}

  ngOnInit() {
      this.filterFunction();
  }

  filterFunction() {
      this.sampleData = this.loadQuestionsWithFilter().pipe(
          tap(wData => this.questions = wData),
          concatMap(data => {
              return this.filter.valueChanges.pipe(
                  startWith(''),
                  map(text => this.search(text))
              )
          })
      )
  }

  search(text: string): any[] {
      return this.questions.filter(data => {
          const term = text.toLowerCase();
          return data.caseID.toLowerCase().includes(term) || (data.word).toLowerCase().includes(term) || (data.product).toLowerCase().includes(term);
      })
  }

  loadQuestionsWithFilter(): Observable < any[] > {
      return this.extractorService.dbFirestore().pipe(
          map(data => data.map(e => {
              return {
                  id: e.payload.doc.id,
                  caseID: e.payload.doc.data()['caseID'],
                  caseOwner: e.payload.doc.data()['caseOwner'],
                  occurrences: e.payload.doc.data()['occurrences'],
                  product: e.payload.doc.data()['product'],
                  timestamp: e.payload.doc.data()['timestamp'].toDate().toDateString(),
                  word: e.payload.doc.data()['word'],
              }
          }))
      );
  }

这是我关于如何加载数据的 HTML 代码

<tbody>
              <tr *ngFor="let item of sampleData | async | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
                  <td>
                      <ngb-highlight [result]=" item.caseID " [term]="filter.value"></ngb-highlight>
                  </td>
                  <td>
                      <ngb-highlight [result]=" item.caseOwner " [term]="filter.value"></ngb-highlight>
                  </td>
                  <td>{{ item.occurrences }}</td>
                  <td>
                      <ngb-highlight [result]=" item.product " [term]="filter.value"></ngb-highlight>
                  </td>
                  <td>{{ item.timestamp }}</td>
                  <td>
                      <ngb-highlight [result]=" item.word " [term]="filter.value"></ngb-highlight>
                  </td>
              </tr>
          </tbody>
      </table>

顺便说一句，我有一个 Firestore 集合名称“sample”，那么该文档是自动生成的 ID。

我不确定我是否snapshotChanges()在服务中正确使用或如何加载数据。

每当数据库中更新新数据时，您能帮我加载表格吗？

谢谢。

标签： angularfirebasegoogle-cloud-firestoreangularfire

解决方案

在您提取器服务中尝试更改此

export class ExtractorService {

  constructor(private fstore: AngularFirestore) {}

  //Get all the data in the "sample" collection.
  dbFirestore() {
      return this.fstore.collection('sample').snapshotChanges().pipe(
      map(action => action.map(a => {
          const data = a.payload.doc.data() as **You extractClass**;
          const id = a.payload.doc.id;
          return {id, ...data};
      }
  }

并在 You 组件页面中

this.extractorService.dbFirestore().subscribe(data => {sampleData = data})

推荐阅读