使用 Angular、RxJs 6 和 InMemoryAPI 如何获得似乎嵌套在多个可观察源中的返回可观察值？

Question

我正在尝试使用 Angular 7+、RxJS 6+ 和 InMemoryAPI 创建一个模拟 API 来测试我的前端 GUI。这是我的 "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};
  }
}

那么我的服务就是一个简单的 post 调用：

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

除了我的观察者 next 函数从未被调用而 "Completed" 函数被调用外，一切正常。 "InMemoryDataService" returns 内的控制台记录具有预期 "MyObject" 值的正确可观察值。虽然，在我的 Angular 组件 console.log 中返回了一个不同的可观察值。它具有正确的 MyObject 值，但在 3 个父 Observable.source 对象中看起来是 "nested"。因此，如果我使用以下赋值，则 next() 函数会被正确调用：

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

这太奇怪了，当我将鼠标悬停在 IDE 中的“.source”上时，提示说它已被弃用。如何在不使用多个“.source”调用的情况下让它工作？我确定我错过了什么，我只是不知道是什么。非常感谢您的帮助。

Answer 1

使用 reqInfo.utils.createResponse$() 而不是 Observable.of()。

这是一个如何操作的例子：https://github.com/angular/in-memory-web-api/blob/36b5f6777f7688ae9109a2df687a89dbfd4a2066/src/app/hero-in-mem-data-override.service.ts

使用 Angular、RxJs 6 和 InMemoryAPI 如何获得似乎嵌套在多个可观察源中的返回可观察值？

Using Angular, RxJs 6 and InMemoryAPI how do I get a returned Observable value that seems to be nested in multiple observable sources?

observable

rxjs

typescript

angular

angular7