angular - 通过带有 rxjs 的管道运算符获取更多详细信息

Question

在我的服务中，我想要获得一个对象，但在将它返回到我的组件之前，我还想要该单个对象的详细信息。

使用管道运算符，我尝试调用可以为我提供详细信息的函数（在本例中Bar）。

但是我有点迷失了如何做到这一点，因为我返回observable<Bar>而不是Bar.

export class Foo {
  public ID;
  public Bar: Bar;
}

export class Bar { }

  /**
  * Returns a single Foo
  */
  public FindSingleFoo(fooID: string): Observable<Foo | HttpError> {
    return this._httpClient.post<Foo>('API/FindSingleFoo', fooID)
      .pipe(
        map((data) => this.FindBarOfFoo(data)),
      );
  }

   /**
   * Returns the Bar of Foo
   * @param fooID - the ID you want Bar for
   */
  public FindBarOfFoo(foo: Foo): Observable<Foo | HttpError> {
    return this._httpClient.post<Bar>('API/FindBarOfFoo', foo.ID).subscribe(
      (result: Bar) => foo.Bar = result
    );
  }

Answer 1

我认为你应该使用switchMap而不是map

试试这个：

export class Foo {
  public ID;
  public Bar: Bar;
}

export class Bar {}

import { map, switchMap } from 'rxjs/operators';

public FindSingleFoo(fooID: string): Observable<Bar|HttpError> {
  return this._httpClient.post<Foo>('API/FindSingleFoo', fooID)
    .pipe(
      switchMap(data => this.FindBarOfFoo(data)),
    );
}

public FindBarOfFoo(foo: Foo): Observable <Bar|HttpError> {
  return this._httpClient.post<Bar>('API/FindBarOfFoo', foo.ID);
}

Answer 2

试试这个，我认为这会奏效

public FindSingleFoo(fooID: string): Observable<Foo> {
    return this._http.post<Foo>('API/FindSingleFoo', fooID)
        .pipe(
            map((data) => this.FindBarOfFoo(data)),
            //map(data => data)
        );
}

/**
* Returns the Bar of Foo
* @param fooID - the ID you want Bar for
*/
public FindBarOfFoo(foo: Foo): Foo {
    let X = null;
    this._http.post<Bar>('API/FindBarOfFoo', foo.ID).subscribe(
        data => { X = data }
    );
    return X;
}