アイテムを観測可能な配列にAngular2で追加しますか？

Question

私はドキュメントを取り出し、そのメタデータをうまく動作するページに一覧表示するサービスを持っています。私は「無限スクロール」を実装したいと私は

文書-list.ts

文書のための観測可能と *ngForループにおける非同期パイプを使用しています現時点では npm i angular2-infinite-scroll

を見て

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); 
    } 
} 

angle2-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

ObservableではなくSubjectで試すことができます。私はあなたの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