как синхронизировать список из коллекции Firestore в реальном времени (компонент + сервис) - PullRequest
Новая
       26

как синхронизировать список из коллекции Firestore в реальном времени (компонент + сервис)

0 голосов
/ 21 мая 2019

Я пытаюсь представить коллекцию firestore в виде списка на html-странице, сначала я создаю Observable в списке из моего компонента, и он работает нормально, но я понимаю, что это должно быть в службе, я изменил свой код следующим образом:

в сервисном конструкторе: 

this.tenantCollection = this.angularFirestore.collection('landlord').doc(this.user.uid).collection("tenants", ref => {
              return ref.orderBy('name')})
this.tenantsList = this.tenantCollection.valueChanges();

и функция для возврата этого наблюдаемого (также в сервисе): 

getTenants(){
  return this.tenantsList;
}

компонент: 

constructor(private landlordService: LandlordService, private router: Router, private route: ActivatedRoute,
    private angularFirestore: AngularFirestore, private auth: AuthService) {
   this.auth.user.subscribe(user => {
        if (user) {
            this.user = user;              
    this.landlordService.getTenants().subscribe(tenanes => {
        this.tenants = tenanes;
        console.log(this.tenants);
    });
        }
    });

HTML: 

<app-tenant-item *ngFor="let t of tenants | async; let i= index" [tenant]="t" [index]="i">
    </app-tenant-item>

Этот список всегда пуст, хотя в этом случае есть значения для firestore (я поместил подписку в конструкторе, который ngOnInit активировал до того, как у меня появился пользователь).

Как я могу это исправить и получить изменения в реальном времени?

1 Ответ

0 голосов
/ 21 мая 2019

Причина проблемы в том, что вы вручную подписываетесь на свою наблюдаемую информацию, возвращаемую методом landlordService.getTenants. Итак, теперь переменная tenants содержит необработанные данные, а не наблюдаемые.

Вам нужно удалить трубу async: 

<app-tenant-item *ngFor="let t of tenants; let i= index" [tenant]="t" [index]="i">
</app-tenant-item>

или присвойте переменную tenants наблюдаемой, метод landlordService.getTenants возвращает и сохранит async канал в вашем шаблоне: 

this.tenants = this.landlordService.getTenants();

Второй подход предпочтителен, потому что вам не нужно отписываться вручную, чтобы избежать утечек памяти. Подробнее об этом: https://blog.angularindepth.com/angular-question-rxjs-subscribe-vs-async-pipe-in-component-templates-c956c8c0c794.

...