2角度 - rxjs - 私はそうのような観察可能な配列を購読する私のテンプレートで観察配列

Question

：私はビューのサブスクライブのアイデアを気に入っから退会ので

<div *ngFor="let item of activities | async">...</div> 

は私が観察可能なアレイへの私の活動の配列を変更しました私の観察。

私の質問は、最初に観測を取得し、活動オブジェクト配列にそれらをマッピングした後、どのように私は全体の観察可能な配列を上書きせずに、そのアレイに追加またはプリペンド活動んですか？

具体的には、私は無限スクロールを作成し、完了新しいhttpリクエストに応じています、私は活動、観察、アレイに追加する必要がある12個の新しい活動オブジェクトを持っています。

活動の定義：

public activities: Observable<Array<ActivitiesItemModel>>; 

私の最初の要求：

this.activities = this._transactionService.Get(url) 
    .map(activities => { 
    // Creates an activities model which contains items<ActivitiesItemModel> 
    return new activitiesModel(activities).items; 
    }) 

私の無限スクロール要求：

// This is where I am stuck.. 
// I assumed I could just map the values retrieved from the request 
this.activities 
    .map(a => { 
    return this._transactionService.Get(queryUrl) 
     .map(activities => { 
     infiniteScroll.complete(); 

     return activities; 
     }) 
    }) 

任意のアイデア？

Answer 1

これがデフォルト値として空の配列とscan()オペレータのための理想的な場合のように見えます。

この例では、配列の中に5つの値をバッファリングし、それが連続した値の増え続ける配列を印刷しますので、以前の配列とそれらをマージします。これは、無限スクロールを達成しようとしているものと同じでなければなりません：あなたの代わりにObservable.interval()の一部のリモートサービスを利用しようとしている。もちろん、https://jsbin.com/jilocaz/2/edit?js,console

[0, 1, 2, 3, 4] 
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14] 
... 

：

Observable.interval(100) 
    .bufferCount(5) 
    .scan((acc, val) => { 
    acc = acc.concat(val); 
    return acc; 
    }, []) 
    .subscribe(val => console.log(val)); 

はライブデモを参照してください。しかし、私はあなたがポイントを得ると思います。

Answer 2

自分のアプリケーションの1つにReduxストアを使用しました。リンクをたどると、そのようにするのがなぜ良いのか、それを行う方法のコード例が示されています。あなたのケースに合っているはずです。一番上に - このアプローチを使用しない場合は、データの変異とその変化検出への影響について注意してください。 2番目のリンクで説明されています。

http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

Answer 3

私は、セットアップ2つのソースをできると思いますし、このように、連結何かを使用します。

let source1 = Rx.Observable.return(getActivities); 
let source2 = Rx.Observable.return(getMoreActivities); 
let scrollevent$ = new BehaviourSubject(); 
source2.skipUntil(scrollevent$); // ignore until this creates a value. 

そして...

let source = Rx.Observable.concat(source1, source2) 
    .subscribe(activities => ...); 

onScroll() { 
scrollevent$.next(null); 
}