Question

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

每当数据库中有新数据更新时，请您帮我加载表。

谢谢。

Answer 1

在您的Extractor服务中，尝试更改此内容

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

Answer 2

更改 service.ts

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

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

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

2 个答案: