Angularfire2, startAfter () не работает для разбиения на страницы - PullRequest
Новая
       36

Angularfire2, startAfter () не работает для разбиения на страницы

0 голосов
/ 10 октября 2018

Согласно документации Firebase, вот как это сделать: 

var first = db.collection("cities")
        .orderBy("population")
        .limit(25);

return first.get().then(function (documentSnapshots) {
  // Get the last visible document
  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
  console.log("last", lastVisible);

  // Construct a new query starting at this document,
  // get the next 25 cities.
  var next = db.collection("cities")
          .orderBy("population")
          .startAfter(lastVisible)
          .limit(25);
});

Но проблема в том, что я не вижу способа использовать функцию get или даже snapshotChanges() для получения длиныминус это будет использоваться в качестве ссылки для следующего получения.Буду признателен за любые советы!

Обновление:

Я попытался вручную ввести индекс, но безрезультатно, поскольку он вернул массив без данных. 

   getNewsCollectionNext() {
    this.newsCollectionRef = this.afDB.collection('news', ref => 
    ref.where('news_is_deleted', '==', false).orderBy('news_timestamp_post_created', 'desc')
    .startAfter(1));
    this.newsCollection = this.newsCollectionRef.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as News;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
    return this.newsCollection;
   }

Хотяэта возвращает 3 элемента 

   getNewsCollection() {
    this.newsCollectionRef = this.afDB.collection('news', ref => 
    ref.where('news_is_deleted', '==', false).orderBy('news_timestamp_post_created', 'desc'));
    this.newsCollection = this.newsCollectionRef.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as News;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
    return this.newsCollection;
    // console.log(this.newsList);
   }

Обновление 2: я заставил работать функцию 'next'!

tl; dr: Итак, я сделал, чтобы развернуть полезную нагрузку документа и изменил мой наблюдаемыйвведите любой, чтобы предотвратить конфликты :) Так вот мой код в сервисе 

  getNewsCollection() {
    this.newsCollectionSubscription = this.newsService.getNewsCollection().
    subscribe(newsCollection => {
      this.newsCollection = newsCollection;
      console.log('t2est',newsCollection[newsCollection.length - 1].doc);
      if(newsCollection){
        this.snapshot = newsCollection[newsCollection.length - 1].doc;
      }

    });
  }
  getNextNewsCollection() {
    this.newsCollectionSubscription = this.newsService.getNextNewsCollection(this.snapshot).
    subscribe(newsCollection => {
      this.newsCollection = newsCollection;
      // console.log('t2est',newsCollection[1].doc);
      console.log(newsCollection);
    });
  }

На моем news-card.component.ts 

  getNewsCollection() {
    this.newsCollectionSubscription = this.newsService.getNewsCollection().
    subscribe(newsCollection => {
      this.newsCollection = newsCollection;
      console.log('t2est',newsCollection[newsCollection.length - 1].doc);
      if(newsCollection){
        this.snapshot = newsCollection[newsCollection.length - 1].doc;
      }

    });
  }
  getNextNewsCollection() {
    this.newsCollectionSubscription = this.newsService.getNextNewsCollection(this.snapshot).
    subscribe(newsCollection => {
      this.newsCollection = newsCollection;
      // console.log('t2est',newsCollection[1].doc);
      console.log(newsCollection);
    });
  }

1 Ответ

0 голосов
/ 10 октября 2018

Посмотрите на следующую HTML-страницу, которая показывает (в чистом Javascript), как изменить query для отображения страниц документов постранично.

Вы можете загрузить его в локальную папку/ каталог, адаптировать объект конфигурации и открыть его с помощью браузера.При нажатии на кнопку в консоли отобразятся документы 3 на 3.

Обратите внимание, что в этом простом POC обработка ошибок не выполняется, когда разбиение на страницы достигает конца коллекции. 

<html>
    <head>
        <script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-firestore.js"></script>
    </head>

    <body>
        <button id="myBtn">Display next subset</button>

        <script>
            document.getElementById("myBtn").addEventListener("click", function () {
                displayNextPaginationSubset();
            });
          // Initialize Firebase
          var config = {
            apiKey: "....",
            authDomain: "....",
            databaseURL: "....",
            projectId: "...."
          };
          firebase.initializeApp(config);

          var db = firebase.firestore();
          var query = db.collection("cities")
              .orderBy("population")
              .limit(3);

          function displayNextPaginationSubset() {

              query.get().then(function (documentSnapshots) {

                  documentSnapshots.forEach(function(doc) {
                      // doc.data() is never undefined for query doc snapshots
                      console.log(doc.id, " => ", doc.data());
                  });


                  // Get the last visible document
                  var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
                  console.log("last", lastVisible);

                  // Construct a new query starting at this document,
                  // get the next 3 cities.
                  query = db.collection("cities")
                          .orderBy("population")
                          .startAfter(lastVisible)
                          .limit(3);
              });

          }

        </script>

    </body>
</html>
...