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

【问题标题】：AngularFirestore database, HTML table not automatically updating when data was changedAngularFirestore 数据库，HTML 表在数据更改时不会自动更新
【发布时间】：2020-11-19 19:39:42
【问题描述】：

我可以通过正确的过滤和分页成功加载我的数据。问题是每当更新 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()，或者我如何加载数据。

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

谢谢。

【问题讨论】：

标签： angular firebase google-cloud-firestore angularfire

【解决方案1】：

更改service.ts

dbFirestore() {
  return this.fstore.collection('sample').valueChanges();
}

为什么它不起作用：
快照返回一次比 concatMap 永远不会再订阅一次，而不是你得到你的数据一次
您必须使用其他功能，例如：valueChanges，...
see this TOO IMPORTANT

【讨论】：

【解决方案2】：

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

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

在你的组件页面中

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

【讨论】：