Функциональность «Загрузи больше» с AngularFire2 и Ionic / Angular - PullRequest
Новая
       30

Функциональность «Загрузи больше» с AngularFire2 и Ionic / Angular

0 голосов
/ 17 апреля 2019

У меня есть страница со списком сообщений.Я хотел бы создать нагрузку больше функциональности.Я использую Ionic 4 с Firestore.Я уже создал функцию в своем провайдере, которая возвращает наблюдаемую со следующей партией фотографий из Firestore.После этого я изо всех сил пытаюсь объединить новые посты с уже загруженными.Мое текущее решение использует оператор rxjs CombineLatest для получения желаемого результата.Но проблема в том, что, когда я загружаю больше постов, весь список «обновляется», и он возвращается обратно в начало страницы.Есть ли способ создать «внешний вид», чтобы новые сообщения были просто добавлены в конец списка.

Я пытался просто поместить каждый элемент в конец массива и отобразить его, что прекрасно работает, но я теряю возможность синхронизировать счетчик лайков в реальном времени для каждого сообщения.

photo-list.page.ts 

loadBatch(){
  let batchSize=3;
  this.freshPosts= this.firebaseProvider.getBatchOfPosts(this.eventId, batchSize ,this.lastDoc).valueChanges();

if(this.posts===undefined){
        console.log("first batch of posts")
        this.posts=this.freshPosts;

      }else{
        //it combines correctly but the list is recreated in the DOM
        this.posts= combineLatest(this.posts, this.freshPosts).pipe(switchMap(posts=>{
          const [allPosts, freshPosts]=posts;
          const combined=allPosts.concat(freshPosts);

          return of(combined);

        }));
}

photo-list.page.html 

<div *ngFor="let post of posts | async; let i = index">
  ...

</div>

Есть ли полезная практика для добавления таких наблюдаемых данных, как эта?Или обходной путь для возврата на верх страницы?

...