Як створити спостережуваний із статичних даних, подібних до http у Angular?


121

У мене є служба, яка має цей метод:

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), тому в обох випадках відбувається безперебійна обробка.

Відповіді:


151

Можливо, ви можете спробувати використовувати 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());
  }
}

2
Це було чудово! Це спрацювало! Я намагався багато речей, таких як Observable.from () тощо. Документація API для Observable не є найчистішою / зручною для користувачів на даний момент! Дякую :)
Michail Michailidis

45
Одне, якщо ви використовуєте версію 6, ви повинні import { of } from 'rxjs';використовувати та використовувати її ofзамість Observable.of.
vip

2
Для Angular v7.xx немає .map()результату get, так що вам потрібно зробити .pipe(map((res:any) => res.json())). Дивіться тут: stackoverflow.com/a/35220045/986160
Michail

64

Починаючи з липня 2018 року та випуску RxJS 6, новий спосіб отримати спостережуване значення має імпорт ofоператора таким чином:

import { of } from 'rxjs';

а потім створити спостережуване зі значення, як-от так:

of(someValue);

Зауважте, що раніше у вас було так, Observable.of(someValue)як у прийнятій відповіді. Існує гарна стаття на інший RxJS 6 змін тут .


Дуже дякую, це працює
Сара

19

Здається, все змінилося після 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()Функція буде викликатися на вашому абонента.


2
Я перейшов на кутовий 2.1.2 .. Здається, все ще підтримується старий спосіб. Чи можете ви, будь ласка, докладно пояснити, чому це краще рішення чи це конвенція? Потім я зміню його в усіх місцях мого коду і знову прийму .. Дякую
Michail

7
@MichailMichailidis, з місяцем ретроспективи, мені здається, обидва однаково справедливі, головна відмінність полягає в тому, що рішення ofТієррі вимагає, щоб ти імпортував функцію rxjs, як-отimport 'rxjs/add/observable/of'
Ніль де Мокрий

12

Ось так можна створити просте спостереження для статичних даних.

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 замість статичних даних.


чи можете ви оновити помилку друку з observable.subscripe to observable.subscribe
Sudharshan

3

Таким чином ви можете створити дані, що спостерігаються, у моєму випадку мені потрібно підтримувати кошик для покупок:

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;
        });
    }
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.