항목을 관측 가능한 배열에 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); 
    } 
} 

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

Observable이 아닌 Subject로 시도 할 수 있습니다. 당신이 할 것, 문서 구성 요소에 다음

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 과목의 특성 (나는 당신의 DocumentsService를 들어

... 뭔가를 시도 할 것이다 그들은 Observable과 Observers 모두 역할을합니다.) Observable을 생성하지 않고 .next()를 통해 데이터를 전달할 수 있습니다.

문서 배열에 바인딩 할 때 비동기 파이프를 사용해야 할 수도 있고 사용하지 않을 수도 있습니다. 나는이에 모습을 가지고 돌아올 것이다

ReactiveX Docs

Getting started with RxJS: Subjects