Я хочу добавить фильтрацию на стороне клиента в приложении 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;
}
}