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

【问题标题】：Angular2 RxJS - Creating an observable for a mocked serviceAngular2 RxJS - 为模拟服务创建一个 observable
【发布时间】：2017-04-06 18:02:45
【问题描述】：

我有一个包含一组任务的模拟文件，每个任务都有一个截止日期。目前（如下）我创建了一个简单的可观察对象，当订阅它时，它会返回模拟任务的集合。我想不通的是如何处理平面任务数组以按到期日期对它们进行分组，返回一个类似的结构；

// 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": [{...}]
}

我目前的observable创建代码如下；

// 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() 创建的 observable 似乎没有该方法可用。我一直在参考this resource 来尝试实现这一点，我注意到Observable.from() 被使用而不是.create()，但是这似乎也不是我的服务中可用的功能。

使用 RxJS 操作符（例如groupBy）是否可以按照上述方式格式化数据（以及如何实现）？还是应该手动格式化？
关于 1 的任一答案 - 这应该发生在哪里？

谢谢！

【问题讨论】：

它总是像Observable.from(mockTasks) 或Observable.of(mockTasks) 一样简单。这取决于您需要什么输出，因为observer.next(mockTasks) 创建了一个具有单个数组值的可观察对象，而不是多个对象值。没有所需的方法可用，应该使用import rxjs/add/observable 和import rxjs/add/operator 手动添加，否则您最终会得到几个最初由 Angular 核心模块添加的基本方法。

标签： angular rxjs observable

【解决方案1】：

我猜你混合了几样东西。 Observables 总是包含时间因素，所以你通过 observables 的帮助随着时间的推移发出一些东西。如果您只想将事物分组到静态数组中，那么 observables 是错误的方法。

在你的情况下，你有几个数据

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 来玩它。

【讨论】：