Làm thế nào để tạo một Observable từ dữ liệu tĩnh tương tự như http một trong Angular?

Tôi đang có một dịch vụ có phương thức này:

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

trong hàm tạo của thành phần, tôi đang đăng ký như thế này:

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

Điều này hoạt động nếu một đối tượng đến từ máy chủ nhưng tôi đang cố gắng tạo một đối tượng có thể quan sát được sẽ hoạt động với lệnh subscribe()gọi đã cho cho một chuỗi tĩnh (điều này xảy ra khi testModelService.fetchModel()không nhận được uuid) để có cách xử lý liền mạch trong cả hai trường hợp.

Có lẽ bạn có thể thử sử dụng ofphương thức của Observablelớp:

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

Kể từ tháng 7 năm 2018 và việc phát hành RxJS 6, cách mới để lấy một Giá trị có thể quan sát được là nhập oftoán tử như sau:

import { of } from 'rxjs';

và sau đó tạo giá trị có thể quan sát được, như sau:

of(someValue);

Lưu ý rằng bạn đã từng phải làm Observable.of(someValue)như trong câu trả lời hiện được chấp nhận. Có một bài viết hay về các thay đổi khác của RxJS 6 ở đây .

Mọi thứ dường như đã thay đổi kể từ 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());
  }
}

Các .next()chức năng sẽ được gọi vào thuê bao của bạn.

Đây là cách bạn có thể tạo một dữ liệu tĩnh có thể quan sát được đơn giản.

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

Tôi hy vọng câu trả lời này là hữu ích. Chúng tôi có thể sử dụng cuộc gọi HTTP thay vì dữ liệu tĩnh.

Bằng cách này, bạn có thể tạo Có thể quan sát từ dữ liệu, trong trường hợp của tôi, tôi cần duy trì giỏ hàng:

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