如何从Angular中类似于http的静态数据创建一个Observable？

Question

我有一个具有此方法的服务:

export class TestModelService {

    public testModel: TestModel;

    constructor( @Inject(Http) public http: Http) {
    }

    public fetchModel(uuid: string = undefined): Observable<string> {
        if(!uuid) {
            //return Observable of JSON.stringify(new TestModel());
        }
        else {
            return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
                .map(res => res.text());
        }
    }
}

在组件的构造函数中,我订阅如下:

export class MyComponent {
   testModel: TestModel;
   testModelService: TestModelService;

   constructor(@Inject(TestModelService) testModelService) {
      this.testModelService = testModelService;

      testService.fetchModel("29f4fddc-155a-4f26-9db6-5a431ecd5d44").subscribe(
          data => { this.testModel = FactModel.fromJson(JSON.parse(data)); },
          err => console.log(err)
      );
   }
}

如果一个对象来自服务器,但是我试图创建一个可以使用给定subscribe()的静态字符串调用的observable (当testModelService.fetchModel()没有收到uuid 时会发生这种情况),这样就可以了.所以在这两种情况下都有无缝处理.

Answer 1

也许您可以尝试使用该类的of方法Observable:

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

public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return Observable.of(new TestModel()).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

Answer 2

从2018年7月开始发布RxJS 6,从值中获取Observable的新方法是导入of运算符,如下所示:

import { of } from 'rxjs';

然后从值中创建observable,如下所示:

of(someValue);

请注意,您以前Observable.of(someValue)在当前接受的答案中必须这样做.还有另RxJS一个很好的第6点的变化在这里.

Answer 3

自Angular 2.0.0以来,事情似乎发生了变化

import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';
// ...
public fetchModel(uuid: string = undefined): Observable<string> {
  if(!uuid) {
    return new Observable<TestModel>((subscriber: Subscriber<TestModel>) => subscriber.next(new TestModel())).map(o => JSON.stringify(o));
  }
  else {
    return this.http.get("http://localhost:8080/myapp/api/model/" + uuid)
            .map(res => res.text());
  }
}

该.next()功能将在您的订户上调用.

Answer 4

这是为静态数据创建简单observable的方法.

let observable = Observable.create(observer => {
  setTimeout(() => {
    let users = [
      {username:"balwant.padwal",city:"pune"},
      {username:"test",city:"mumbai"}]

    observer.next(users); // This method same as resolve() method from Angular 1
    console.log("am done");
    observer.complete();//to show we are done with our processing
    // observer.error(new Error("error message"));
  }, 2000);

})

to subscribe to it is very easy

observable.subscribe((data)=>{
  console.log(data); // users array display
});

我希望这个答案很有帮助.我们可以使用HTTP调用而不是静态数据.

Answer 5

截至 2021 年 5 月，从值获取 Observable 的新方法是：

输入：

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

并使用它，就像这样::

Observable.of(your_value)