Блог

Предыстория

Большинство примеров извлечения данных из FireStore Firebase через AngularFire:

(a) показать использование Observable<any[]> для извлечения данных:

 export class AppComponent {
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
  }
}
  

(b) связать его с шаблоном, используя канал для async :

 <ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.name}}
  </li>
</ul>
  

Ситуация

Я не вижу примеров того, как просто извлекать, data: SomeModel[] а НЕ data: Observable<SomeModel[]> … после некоторых усилий я нашел обходной путь:

     async getData(): Promise<SomeModel[]> {
        return await new Promise((resolve, reject) => {
            this.myCollection.snapshotChanges().subscribe(data => {
                this.data = data.map(e => {
                  return {
                    id: e.payload.doc.id,
                    ...e.payload.doc.data()
                  };
                });
                resolve(this.data);
            });
        });
    }
  

Вопрос

Но как новичку в этой конкретной области, мое решение кажется надуманным, и я ищу, как сделать это наилучшим образом. Спасибо, что уделили нам время!

Вы должны использовать асинхронный канал вместо установки свойства экземпляра, потому что асинхронный канал обрабатывает отмену подписки при onDestory. но если вы действительно хотите присвоить результат свойству, вы просто назначаете его в subscribe ()

  getModel():Observable<MyModel[]>{
         this.myCollection.snapshotChanges().map((data) => {
            return this.data = data.map(e => {
              return {
                id: e.payload.doc.id,
                ...e.payload.doc.data()
              };
            });
        });
    }  

 this.getModel().subscribe(data=>this.data=data)