База данных AngularFirestore, таблица HTML не обновляется при изменении данных с помощью «onSnapshot» - PullRequest
Новая
       5

База данных AngularFirestore, таблица HTML не обновляется при изменении данных с помощью «onSnapshot»

2 голосов
/ 10 марта 2020

Я использую 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);
      }); 
    });
  }

Чтобы получить данные об услуге, я использую этот код для 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>

Тогда моя база данных выглядит следующим образом:

enter image description here

Проблема здесь в том, что когда я добавляю, обновляю или удаляю данные в базе данных, таблица не обновлялась и не перезагружалась автоматически. Мне нужно обновить страницу sh для обновления таблицы.

Как я могу обновить таблицу после обновления базы данных?

1 Ответ

2 голосов
/ 10 марта 2020

Вы получаете данные из сервиса только один раз, так как вы возвращаете обещание. Обещание возвращает значение только один раз, а затем они завершаются. Что вам нужно, это Observable.

Вы можете определить publi c 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, вы можете подписаться на каждый компонент, где вам нужны данные. Например, 

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 состоит в том, что вы можете использовать их непосредственно в своих шаблонах. Например, если ваш сервис будет опубликован c в вашем компоненте, вы можете использовать асин * трубу c в вашем шаблоне, чтобы иметь доступ к текущим значениям наблюдаемого: 

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