export class PaginationService {
// Source data
private _done = new BehaviorSubject(false);
private _loading = new BehaviorSubject(false);
private _data = new BehaviorSubject([]);
private query: QueryConfig;
// Observable data
data: Observable<any>;
done: Observable<boolean> = this._done.asObservable();
loading: Observable<boolean> = this._loading.asObservable();
constructor(private afs: AngularFirestore) { }
// Initial query sets options and defines the Observable
init(path, field, opts?) {
this.query = {
path,
field,
limit: 2,
reverse: false,
prepend: false,
...opts
}
const first = this.afs.collection(this.query.path, ref => {
return ref
.orderBy(this.query.field, this.query.reverse ? 'desc' : 'asc')
.limit(this.query.limit)
})
this.mapAndUpdate(first)
// Create the observable array for consumption in components
this.data = this._data.asObservable()
.scan( (acc, val) => {
return this.query.prepend ? val.concat(acc) : acc.concat(val)
})
}
// Retrieves additional data from firestore
more() {
const cursor = this.getCursor()
const more = this.afs.collection(this.query.path, ref => {
return ref
.orderBy(this.query.field, this.query.reverse ? 'desc' : 'asc')
.limit(this.query.limit)
.startAfter(cursor)
})
this.mapAndUpdate(more)
}
// Determines the doc snapshot to paginate query
private getCursor() {
const current = this._data.value
if (current.length) {
return this.query.prepend ? current[0].doc : current[current.length - 1].doc
}
return null
}
// Maps the snapshot to usable format the updates source
private mapAndUpdate(col: AngularFirestoreCollection<any>) {
if (this._done.value || this._loading.value) { return };
// loading
this._loading.next(true)
// Map snapshot with doc ref (needed for cursor)
return col.snapshotChanges()
.do(arr => {
let values = arr.map(snap => {
const data = snap.payload.doc.data()
const doc = snap.payload.doc
return { ...data, doc }
})
// If prepending, reverse array
values = this.query.prepend ? values.reverse() : values
// update source with new values, done loading
this._data.next(values)
this._loading.next(false)
// no more values, mark done
if (!values.length) {
this._done.next(true)
}
})
.take(1)
.subscribe()
}
// Reset the page
reset() {
this._data.next([])
this._done.next(false)
}
Я хочу заменить Firebase глобальным сервером. У меня есть API /api/latest
, и он имеет параметры start
и length
Я хочу применить это this.global.getData('/api/latest')
и start
это 1
и length
это 4
Потому что сейчас я работаю с прокручиваемым, когда он прокручивается вниз, он добавляет другие данные.
https://fireship.io/lessons/infinite-scroll-firestore-angular/ Я просто следовал коду, но он использует firebase, поэтому Я не знаю, как применить глобальный getData