angular - 将项目附加到 Angular2 中的可观察数组？

Question

我有一项服务可以获取文档并将其元数据列在一个工作正常的页面上。我想实现“无限滚动”并查看了 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));
}

还有其他想法吗？

Answer 1

您可以尝试使用 Subject 而不是 Observable。我会尝试类似...

对于您的文档服务:

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 Subjects 的性质(它们同时充当 Observable 和 Observer)，您可以在创建 Observable 之外通过 .next() 传递数据。

绑定(bind)到文档数组时，您可能仍然需要使用异步管道，也可能不需要。

有关主题的更多信息:

ReactiveX Docs

Getting started with RxJS: Subjects