Добавить элементы в наблюдаемый массив в Angular2?

У меня есть служба, которая извлекает документы и перечисляет их метаданные на странице, которая отлично работает. Я хочу реализовать «бесконечную прокрутку» и посмотрел npm i angular2-infinite-scroll

На данный момент я использую наблюдаемое для документов и асинхронный канал в цикле *ngFor.

список-документов.ts

export class DocumentList implements OnInit {
    documents: Observable<Array<Document>>;
    chunck: number = 100;
    from: number = 0;
    keyword: string = "";

    constructor(private _documentService: DocumentService) {}

    ngOnInit() {
    this.documents = this._documentService.getDocuments(this.chunck, this.from, this.keyword);
    }
}

С angular2-infinite-scroll у меня есть функция, которая вызывается, когда я прокручиваю страницу вниз, я пытаюсь получить больше документов и представить их метаданные на странице с тем, что уже есть.

onScroll() {
this.from = documents.length ... ?
//this.documents = this._documentService.getDocuments(this.chunck, this.from, this.keyword);
}

Я не уверен, возможно ли это, когда я использую наблюдаемое? Если вместо этого я использую простой массив для документов, documents: Document[] я могу сделать что-то вроде

onScroll() {
this._documentService.getDocuments(this.chunck, this.from, this.keyword)
    .subscribe(documents => this.documents.push(documents));
}

Любые другие идеи?


typescript angular angular2-observables angular2-services
person John Doe    schedule 15.08.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете попробовать это с субъектом, а не с наблюдаемым. Я бы попробовал что-то вроде...

Для вашего DocumentsService:

import { Subject } from 'rxjs/Rx';

export class DocumentService {
  _documentSubject = Subject.create();

  getNextTen() {
    // ... get the document meta data however ... 
    this._documentSubject.next(documentMetaData);
  }

  get documentSubject() {
    return this._documentSubject;
  }

  //...
}

А затем в компоненте документов вы должны сделать:

 // ...
documents: Array = [];
documentRetriever: Subject<any>;

constructor(ds: DocumentService) {
  //You maybe shouldn't do this in the constructor, but the point is
  //you only want to subscribe to the Subject once.
  this.documentRetriver = ds.documentSubject;
  this.documentRetriever.subscribe(newDocuments => {
    this.documents.push(newDocuments);
  })
}
onScroll() {
  this.ds.getNextTen();
}

Из-за природы субъектов RxJS (они действуют как Observables и Observers) вы можете передавать данные через .next() вне создания Observable.

Вам может понадобиться или не понадобиться использовать асинхронный канал при привязке к массиву документов.

Для получения дополнительной информации по предметам:

Документы ReactiveX

Начало работы с RxJS: темы

person ABabin    schedule 15.08.2016
comment
Спасибо, я посмотрю на это и вернусь - person John Doe; 16.08.2016