Используя Angular, RxJs 6 и InMemoryAPI, как мне получить возвращаемое наблюдаемое значение, которое, кажется, вложено в несколько наблюдаемых источников? - PullRequest
Новая
       33

Используя Angular, RxJs 6 и InMemoryAPI, как мне получить возвращаемое наблюдаемое значение, которое, кажется, вложено в несколько наблюдаемых источников?

0 голосов
/ 08 ноября 2018

Я пытаюсь использовать Angular 7+, RxJS 6+ и InMemoryAPI для создания фиктивного API для тестирования моего интерфейсного интерфейса. Вот мой "in-memory-data-.service.ts": 

export class InMemoryDataService implements InMemoryDbService {
  // HTTP POST interceptor
  post(reqInfo: RequestInfo) {
    console.log('Caught POST:');
    console.log(reqInfo);
    if (reqInfo.collectionName === 'myApiUrlSign') {
      console.log('Return generated myObject');
      const reportResponse = new MyObject();
      reportResponse.id = reqInfo.utils.getJsonBody(reqInfo.req);
      reportResponse.time = new Date();
      const response: ResponseOptions = {
        body: reportResponse,
        status: STATUS.OK
      };
      const observable = of(response);
      console.log('In Memeory data service = ');
      console.log(observable);
      return observable;
    }
    return undefined; // Let the default POST handle all others
  }

  // Example DB Collection
  createDb() {
    const heroes = [
      { id: 11, name: 'Mr. Nice' },
      { id: 12, name: 'Narco' }
    ];
    return {heroes};
  }
}

Тогда мой сервис - простой почтовый звонок: 

generateMyObject(myId: string): Observable<MyObject> {
    return this.http.post<MyObject>(
        this.apiUrl,
        JSON.stringify({ myId }),
        { headers: this.headers }
    );
}

Наконец, моя функция onSubmit компонента выглядит следующим образом: 

  onSubmit() {
    const self = this;
    const formModel = this.myForm.value;
    const obs = this.myService.generateMyObject(formModel.myId);
    console.log('On Submit Observer = ');
    console.log(obs);
    obs.subscribe((data: MyObject) => { // On Next()
          console.log('MyObject recieved');
          console.log(data);
          self.myObject = data;
        },
        error => console.log(error), // On Error()
        () => console.log('Completed')); // On Completed()

    console.log(this.myObject);
  }

Все работает, кроме моего наблюдателя, следующая функция никогда не вызывается и функция "Завершено" есть. Журнал консоли внутри «InMemoryDataService» возвращает правильную наблюдаемую величину с ожидаемым значением «MyObject». Хотя в моем Angular-компоненте console.log возвращается другая наблюдаемая. Он имеет правильное значение MyObject, но выглядит «вложенным» в 3 родительских объекта Observable.source. Поэтому, если я использую следующее присваивание, функция next () будет вызвана правильно: 

const obs = this.reportGenService.generateReport(formModel.orderId)
    .source.source.source;

Это очень странно, и когда я нахожу указатель мыши на «.source» в моей IDE, подсказка говорит, что он устарел. Как мне заставить это работать без использования нескольких вызовов ".source"? Я уверен, что что-то упустил, я просто не знаю что. Ваша помощь очень ценится.

1 Ответ

0 голосов
/ 08 ноября 2018

Используйте reqInfo.utils.createResponse$() вместо Observable.of().

Вот пример того, как это сделать: https://github.com/angular/in-memory-web-api/blob/36b5f6777f7688ae9109a2df687a89dbfd4a2066/src/app/hero-in-mem-data-override.service.ts

...