Bagaimana cara membuat Observable dari data statis yang mirip dengan http di Angular?

Saya memiliki layanan yang memiliki metode ini:

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

di konstruktor komponen saya berlangganan seperti ini:

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

Ini berfungsi jika sebuah objek berasal dari server tetapi saya mencoba membuat observable yang akan bekerja dengan subscribe()panggilan yang diberikan untuk string statis (ini terjadi ketika testModelService.fetchModel()tidak menerima uuid) sehingga ada penanganan yang mulus dalam kedua kasus.

Mungkin Anda dapat mencoba menggunakan ofmetode Observablekelas:

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

Mulai Juli 2018 dan rilis RxJS 6, cara baru untuk mendapatkan Observable dari suatu nilai adalah dengan mengimpor ofoperator seperti ini:

import { of } from 'rxjs';

dan kemudian buat yang dapat diamati dari nilainya, seperti:

of(someValue);

Perhatikan, bahwa Anda dulu harus melakukan Observable.of(someValue)seperti dalam jawaban yang diterima saat ini. Ada artikel bagus tentang perubahan RxJS 6 lainnya di sini .

Hal-hal tampaknya telah berubah sejak 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());
  }
}

The .next()fungsi akan dipanggil pelanggan Anda.

Ini adalah bagaimana Anda dapat membuat observasi sederhana untuk data statis.

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

Saya harap jawaban ini bermanfaat. Kita bisa menggunakan panggilan HTTP sebagai pengganti data statis.

Dengan cara ini Anda dapat membuat Observable from data, dalam kasus saya, saya perlu mengelola keranjang belanja:

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