Как добавить Добавление фильтрации на стороне клиента в веб-приложение Angularfire - PullRequest
Новая
       55

Как добавить Добавление фильтрации на стороне клиента в веб-приложение Angularfire

0 голосов
/ 27 января 2020

Я хочу добавить фильтрацию на стороне клиента в приложении angular, например: https://github.com/angular/angularfire/blob/master/docs/firestore/querying-collections.md

приложение загружено с бесконечной прокруткой ... и у меня возникла проблема в реализуя фильтрацию в приложении

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

export class InfiniteScrollComponent{
  @ViewChild(CdkVirtualScrollViewport, {static: false})
  viewport: CdkVirtualScrollViewport;

  batch = 15;
  theEnd = false;

  offset = new BehaviorSubject(null);
  infinite: Observable<any[]>;

  constructor(private db: AngularFirestore) {
    const batchMap = this.offset.pipe(
      throttleTime(500),
      mergeMap(n => this.getBatch(n)),
      scan((acc, batch) => {
        return { ...acc, ...batch };
      }, {})
    );

    this.infinite = batchMap.pipe(map(v => Object.values(v)));
  }


  /// Filter
  tags: [string];

  ///
  filters= {}

  getBatch(offset) {
    console.log(offset);
    return this.db
      .collection('posts', ref =>
        ref
          .orderBy('title')
          .startAfter(offset)
          .limit(this.batch)
      )
      .snapshotChanges()
      .pipe(
        tap(arr => (arr.length ? null : (this.theEnd = true))),
        map(arr => {
          return arr.reduce((acc, cur) => {
            const id = cur.payload.doc.id;
            const data = cur.payload.doc.data();
            return { ...acc, [id]: data };
          }, {});
        })
      );
  }

  nextBatch(e, offset) {
    if (this.theEnd) {
      return;
    }

    const end = this.viewport.getRenderedRange().end;
    const total = this.viewport.getDataLength();
    console.log(`${end}, '>=', ${total}`);
    if (end === total) {
      this.offset.next(offset);
    }
  }

  trackByIdx(i) {
    return i;
  }
}
...