Angular'daki http'ye benzer statik verilerden bir Gözlemlenebilir nasıl oluşturulur?

Bu yönteme sahip bir hizmetim var:

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

bileşenin kurucusunda şu şekilde abone oluyorum:

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)
      );
   }
}

Bu, bir nesne sunucudan gelirse çalışır, ancak ben subscribe()statik bir dizge için verilen çağrı ile çalışacak bir gözlemlenebilir oluşturmaya çalışıyorum (bu testModelService.fetchModel(), bir uuid almadığında gerçekleşir ), böylece her iki durumda da sorunsuz bir işlem vardır.

Belki sınıfın ofyöntemini kullanmayı deneyebilirsiniz 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());
  }
}

Temmuz 2018 ve sürümünden itibaren RxJS 6, bir değerden bir Gözlemlenebilir'i almanın yeni yolu, ofoperatörü şu şekilde içe aktarmaktır :

import { of } from 'rxjs';

ve sonra değerden gözlemlenebilir olanı yaratın, şöyle ki:

of(someValue);

Observable.of(someValue)Şu anda kabul edilen cevapta bunu yapmak zorunda olduğunuzu unutmayın . Diğer RxJS 6 değişiklikleri hakkında burada güzel bir makale var .

Angular 2.0.0'dan bu yana işler değişmiş görünüyor

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()İşlevi üzerinde abone çağrılacak.

Statik veriler için basit bir gözlemlenebilir özelliği bu şekilde oluşturabilirsiniz.

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
});

Umarım bu cevap yardımcı olur. Statik veri yerine HTTP çağrısı kullanabiliriz.

Bu şekilde verilerden Gözlemlenebilir'i oluşturabilirsiniz, benim durumumda alışveriş sepetini korumam gerekiyor:

service.ts

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
        }
      }
}

Component.ts

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

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