Question

在我的模板中，我订阅了一个可观察的数组，如下所示：

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

我将我的活动数组更改为一个可观察数组，因为我喜欢从我的observables订阅和取消订阅视图的想法。

我的问题是，在最初检索observable并将它们映射到活动对象数组后，如何在不覆盖整个observable数组的情况下将活动追加或预先添加到该数组？

具体来说，我正在创建一个无限滚动，当新的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()运算符的理想情况，其中一个空数组作为默认值。

此示例将五个值缓冲到一个数组中，然后将它们与前一个数组合并，以便它连续打印不断增加的值数组。这应该与您使用无限滚动尝试实现的相同：

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

查看现场演示：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()，但我认为您明白了这一点。

Answer 2

我在我的一个应用程序中使用了Redux存储。以下链接解释了为什么这样做是个好主意，并显示如何执行它的代码示例。应该符合你的情况。最重要的是 - 如果你不使用这种方法 - 注意数据的突变及其对变化检测的影响。在第二个链接中解释。

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

我认为你可以设置两个来源并使用这样的concat;

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

Angular 2 - rxjs - 可观察数组

3 个答案: