将项目追加到Angular2中的可观察数组？

Question

我有一个服务，获取文件，并在正常工作的页面上列出他们的元数据。我想实现“无限滚动”看着npm i angular2-infinite-scroll

在我使用的是可观察的文件，并在*ngFor环异步管

文档list.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来尝试。我会尝试像...

为了您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学科的性质（它们既可以作为Observable也可以作为Observers），您可以在创建Observable之外通过.next（）传递数据。

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

有关主题的详细信息：

ReactiveX Docs

Getting started with RxJS: Subjects