如何创建一个可观测的静态数据类似于 http 一在角度？

我有一个服务，有这种方法:

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()静态字符串调用工作(这发生在 testModelService.fetchModel()没有接收 uuid 时) ，所以在这两种情况下都有无缝处理。

178297 次浏览
小开
最佳答案

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

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());
}
}
小开

自从 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()函数将在您的订阅者上调用。

小开

这就是为静态数据创建一个简单的可观察数据的方法。

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 调用代替静态数据。

小开

从2018年7月发布的 RxJS 6开始，从值中获取可观测值的新方法是像下面这样导入 of运算符:

import { of } from 'rxjs';

然后根据值创建可观测的，像这样:

of(someValue);

注意，您过去必须像当前接受的答案那样执行 Observable.of(someValue)。有一篇很好的文章介绍了其他 RxJS6的变化 给你。

小开

这样你就可以从数据中创建可观察的数据，在我的例子中，我需要维护购物车:

服务

export class OrderService {
cartItems: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
cartItems$ = this.cartItems.asObservable();


// I need to maintain cart, so add items in cart


addCartData(data) {
const currentValue = this.cartItems.value; // get current items in cart
const updatedValue = [...currentValue, data]; // push new item in cart


if(updatedValue.length) {
this.cartItems.next(updatedValue); // notify to all subscribers
}
}
}

组件

export class CartViewComponent implements OnInit {
cartProductList: any = [];
constructor(
private order: OrderService
) { }


ngOnInit() {
this.order.cartItems$.subscribe(items => {
this.cartProductList = items;
});
}
}
小开

截至2021年5月，从一个值中得到一个可观测值的新方法是:

进口:

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

使用，像这样:

Observable.of(your_value)

提交答案