首页 文章

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

提问于
浏览
0

我正在尝试使用Angular 7,RxJS 6和InMemoryAPI来创建用于测试我的前端GUI的模拟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”值的正确observable . 虽然,在我的Angular组件console.log中,返回了一个不同的observable . 它具有正确的MyObject值,但它看起来“嵌套”在3个父Observable.source对象中 . 因此,如果我使用以下赋值,则正确调用next()函数:

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

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

1 回答

相关问题