Question

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

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

Service.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);
      }); 
    });
  }

要获取有关服务的数据，我将此代码用于 Component.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仅返回一次值，然后它们完成。您需要的是一个可观察的物体。

您可以在服务中定义一个公共的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的好处是，您也可以直接在模板中使用它们。例如，如果您的服务在组件中是公共的，则可以使用模板中的异步管道来访问可观察对象的当前值：

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

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

1 个答案: