Как использовать snapshotChanges () с firestore и ionic 4 - PullRequest
Новая
       19

Как использовать snapshotChanges () с firestore и ionic 4

0 голосов
/ 18 февраля 2019

Привет, друзья, у меня есть код в моем приложении ionic4 для извлечения данных из пожарного магазина, и я пытаюсь сделать это с помощью этого кода, но он не отображает эти данные

Я попытался использовать snapshotChanges () в моемкод, но это не удалось, и я также хочу получить идентификатор документов, как я могу сделать это

мой код ниже здесь:

news.page.ts 

import { Component, OnInit } from '@angular/core';
import {AngularFirestore, AngularFirestoreDocument} from 'angularfire2/firestore';
import {Observable} from 'rxjs';
import { Router } from '@angular/router';
import 'rxjs/add/operator/map';
export class FilmsPage implements OnInit {
  news: Observable<any[]>;
  constructor(public db: AngularFirestore, private router: Router) { }

  ngOnInit() {
      this.db.collection('123').snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
}

news.page.html 

<ion-content padding>
        <ion-item *ngFor=" let count of news | async">
          <ion-button routerLink="/details/{{count.id}}">{{count.name}} -> id: {{count.id}}</ion-button>

</ion-item>
</ion-content>

1 Ответ

0 голосов
/ 18 февраля 2019

В настоящее время существует несколько проблем с вашей реализацией.

Первая проблема заключается в том, что вам нужно присвоить результат this.db.collection('123').snapshotChanges()... свойству класса news: Observable<any[]>, чтобы иметь возможность эффективно использовать async pipe в вашем шаблоне: 

ngOnInit() {
  this.news = this.db.collection('123').snapshotChanges().map(actions => {
    return actions.map(a => {
      const data = a.payload.doc.data();
      const id = a.payload.doc.id;
      return { id, ...data };
    });
});

Следующая проблема зависит от вашей версии RxJS.Если ваш проект использует RxJS 5.5+, вы должны использовать pipeable операторов .Это потребует обновления вашего импорта оператора map, а также обновления его использования с snapshotChanges().Фактически, он просто будет двигаться map() внутри pipe(): 

import { map } from 'rxjs/operators';

// ...

ngOnInit() {
  this.news = this.db.collection('123').snapshotChanges().pipe(
    map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    })
  );
});

Надеюсь, это поможет!

...