Angular2 RxJS - 为模拟服务创建一个observable

时间:2016-11-22 21:59:54

标签: angular rxjs observable

我有一个包含任务集合的模拟文件,每个任务都有截止日期。目前(下面)我创建了一个简单的observable,当订阅时,它返回模拟任务的集合。我没弄明白的是我如何处理平面任务组以按截止日期对它们进行分组,返回类似的结构;

// Current data structure (unstructured)
[{due: "2016-01-01"}, {due: "2016-01-01"}, {due: "2016-01-02"}, ...]

// Desired structure for consumption
{
  "2016-01-01": [{...}, {...}],
  "2016-01-02": [{...}, {...}, {...}],
  "2016-01-03": [{...}]
}

我当前的可观察创建代码如下;

// Service...
tasks: Observable<Task[]>;

// init() called from the constructor
private init() {
  this.tasks = Observable.create(observer => {
    observer.next(mockTasks);
  });
}

getTasks() {
  return this.tasks;
}

我的组件中使用了以下内容;

// Component...
ngOnInit() {
  this.taskService.getTasks().subscribe(tasks => {
    this.tasks = tasks; // Contains the collection of tasks as expected
  });
}

这很好用 - 我按预期完成了我的完整任务。我尝试使用groupBy运算符来实现上述目标,但通过Observable.create()创建的可观察对象似乎没有可用的方法。我一直指的是this resource尝试实现这一点,我注意到使用了Observable.from()而不是.create(),但这似乎也不是我服务中的可用功能。

  1. 使用RxJS运算符(例如groupBy)如上所述格式化数据(以及如何实现)?或者应该手动格式化?
  2. 关于1的答案 - 应该在哪里进行?
  3. 谢谢!

1 个答案:

答案 0 :(得分:2)

我猜你正在混合几件事。 Observables总是有时间因素,所以你可以通过一个可观察的东西随着时间的推移发出一些东西。如果你只想在静态数组中对事物进行分组,那么observables是错误的方法。

在你的情况下,你有几个dats

const tasks = 
  [ {due: "2016-01-01"}
  , {due: "2016-01-01"}
  , {due: "2016-01-02"}
  ];

如果您要将它们放入Observable中,那么这是可能的,但它只会输出一次数组,就是这样。

const observable = Rx.Observable.of(tasks);
observable.subscribe(x => console.log('All at once', x));
// output: All at once [ {due: "2016-01-01"},  {due: "2016-01-01"}, {due: "2016-01-02"} ];

如果你想及时分发它们 - 现在我们越来越接近Observables的用途 - 你也可以这样做

const observable2 = Rx.Observable.from(tasks);
observable2.subscribe(x => console.log('One after the other', x));
// output: 'One after the other' {due: "2016-01-01"}
//         'One after the other' {due: "2016-01-01"}
//         'One after the other' {due: "2016-01-02"}

现在让我们假设我们有一个数据源,偶尔提供一个新任务,我们希望随着时间的推移对它们进行分组。 这就是它的样子:

const observable3 = Rx.Observable.from(tasks);
observable3
  .scan((acc, obj) => {
    let oldValue = acc[obj.due] || 0;
    acc[obj.due] = ++oldValue;
    return acc;
  }, {})
  .subscribe(x => console.log(x));
// output: { 2016-01-01: 1 }
//         { 2016-01-01: 2 }
//         { 2016-01-01: 2, 2016-01-02: 1 }

因此,根据您的需求,Observables可能是正确的。如果数据及时分发,则完全可以将它们分组,如上所示。我uploaded the code to jsbin来玩它。