AngularFirestore 数据库，使用 "onSnapshot"更改数据时 HTML 表未更新

Question

我正在使用 onSnapshot获取数据库中的实时更新。

我使用以下代码获取表的数据:

服务.ts

export class ExtractorService {

  constructor(private fstore: AngularFirestore) { }

  sampleFunction() {
    return new Promise(resolve => {
      this.fstore.firestore.collection('banned').doc('words')
      .onSnapshot(function(doc) {
        //console.log("from service (WORDS): ", doc.data().cars)
        resolve(doc.data().cars);
      }); 
    });
  } 

要获取有关服务的数据，我将此代码用于 组件.ts

export class sampleComponent implements OnInit {

banWords = [];

  constructor(private extractorService: ExtractorService) {}

  ngOnInit() {
    this.loadBannedWords()
  }

 loadBannedWords(){
      this.extractorService.sampleFunction().then(data => {
      this.banWords = (data as unknown as string[]);
      console.log("words: ", this.banWords )
    })

  }

然后我使用 加载表HTML :

<tr *ngFor ="let item of banWords ; index as i ">
      <td>{{ i+1 }}</td>
      <td>{{ item }}</td>

然后我的 数据库 看起来像这样:



这里的问题是当我在数据库上添加、更新或删除数据时，表没有自动更新或重新加载。我需要刷新页面才能更新表格。

更新数据库时如何更新表？

Answer 1

您只从服务中获取数据一次，因为您正在返回一个 promise 。 Promise 只返回一个值，然后它们就完成了。你需要的是一个 Observable。

你可以在你的服务中定义一个公共(public)的 Observable。

就像是:

export class ExtractorService {

  public myObservable$: Observable<Array<string>>`;

  constructor(private fstore: AngularFirestore) {
    this.myObservable$ = this.fstore.firestore.collection('banned').doc('words')
        .onSnapshot.pipe(map(doc -> doc.data().cars));
  }
}

这样，您的 Observable 将通过仅将汽车返回给所有订阅者来操作快照 Observable。

定义 Observable 后，您可以订阅需要数据的每个组件。例如

export class SomeComponent {

  private onDestroy$ = new Subject();

  constructor(private extractorService: ExtractorService) { }

  public ngOnInit() {
    this.extractorService.myObservable$
        .pipe(takeUntil(this.onDestroy$))
        .subscribe(data => {
      this.banWords = data;
      console.log("words: ", this.banWords )
    });
  }

  public ngOnDestroy() {
    // Unsubscribe all subscriptions of this component.
    this.onDestroy$.next();
  }
}

使用 Observables 的好处是，您也可以直接在模板中使用它们。例如，如果您的服务将在您的组件中公开，您可以使用模板中的异步管道来访问 observable 的当前值:

<div *ngFor="let car of extractorService.myObservable$ | async">
  {{ car }}
</div>