从结果中创建Observable<T>

Question

我正在尝试Angular2。

我注意到http服务使用Observable对象而不是Promise（我不太喜欢这个选择.. async/await即将到来）。

在我的服务中，我从Web服务下载Plants列表。 点击一棵植物后，我使用路由显示详细信息。但是这样做时，当我返回时，植物会再次被下载（因为构造函数会再次调用）。

为了避免这种情况，我想要做如下操作：

public getPlants(): Observable<Plants[]>
{   
    if (this._plants != null)
        return Observable.fromResult (this._plants); //This method does not exists 

    return this._http.get('../../res/heroes.json')...
}

有没有方法可以做到这一点？ 如何在我的ts文件中导入Observable类？

谢谢！

- user3471528

---

如果你只是想尝试Angular2，我可以建议你试试aurelia。在页面上按Ctrl-F查找“httpclient”以查看示例。它返回一个Promise，就像你想要的一样。 - MikeSW

难道不应该像其他语言中那样叫做 Observable.just 吗？ - njzk2

Answer 1

在TypeScript（或JavaScript）中，该方法被称为of。此外，Learn rxjs也有一个很好的教程。

如果你使用的是rxjs6，你可以从rxjs获取所有内容。

import { Observable, of } from 'rxjs';

public getPlants(): Observable<Plant[]> {
  const mocked: Plant[] = [
    { id: 1, image: 'hello.png' }
  ];
  // returns an Observable that emits one value, mocked; which in this case is an array,
  // and then a complete notification
  // You can easily just add more arguments to emit a list of values instead
  return of(mocked);
}

---

在之前的版本中，您从不同的位置导入了运算符

import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';

public getPlants(): Observable<Plant[]> {
  const mocked: Plant[] = [
    { id: 1, image: 'hello.png' }
  ];
  return of(mocked);
}

---

而在此之前，您将其导入为Observable类的一个扩展

import { Observable } from "rxjs/Observable";
import 'rxjs/add/observable/of';

public getPlants(): Observable<Plants[]> {
    // this can be changed to a member variable of course
    let mocked: Plants[] = [{
        id: 1,
        image: "hello.png"
    }];
    return Observable.of(mocked);
}

- Patrick

---

我发现我还需要添加 import 'rxjs/add/observable/of';。 - SergioL

如果您不想逐个添加所有操作符，也可以使用 import from 'rxjs/Rx'。 - LoganMzz

我认为这是较旧的内容，但我仍然希望保持更新。Observable.create()已被弃用，并建议使用new Observable()。而of()也不再在rxjs中或已被弃用。或者我有所忽略？ - Ak777

Answer 2

这是我的工作解决方案：

if (this._heroes != null && this._heroes !== undefined) {
    return Observable.create(observer => {
        observer.next(this._heroes);
        observer.complete();
    });
}

我希望这是最好的解决方案。

- user3471528

---

这太完美了。这节省了我很多时间，谢谢！ - b264

变量/参数observer的类型是什么？ - Ravinder Payal

这是一个Subscriber。请参阅Observable.create()和new Observable()文档。 - LoganMzz

下面的解决方案是更好的。 - Michael Lorton

我认为这篇文章有些陈旧，但我仍然想让它保持更新。Observable.create()已经过时，建议使用new Observable()。而of()在rxjs中也不再存在或已经过时了。或者我是错过了什么？ - Ak777

真的很有帮助！简短而干净 :))) - Thien Nguyen Minh