检索可观测内部的值

Question

我向服务器发出请求，并得到可观察到的响应。在数据内部，我有一个ID，它引用另一个文档，我需要发送另一个请求来获取数据，并将其附加到父对象的数据中。如何做到这一点？

有了Promise，我可以使用async/await来实现这一点，但我想知道如何使用Observable来实现这一点

promise样品

async func_name() {
  let data1 = await <first_server_call_returns_promise>();
  let data2 = await <second_call_with_data1.id_returns_promise>();
  data1.value = data2;
  return data1;
}

如何实现上述与观察？

编辑1

基于@Teddesterne回复，我写的代码如下，但我在订阅中得到的是一个可观察的数据，而不是阻止我将可观察的数据分配给html的实际数据

this.blogDoc.snapshotChanges().pipe(
    exhaustMap((blogs) => {
        return blogs.map(blog => {
          const data = blog.payload.doc.data();
          const id = blog.payload.doc.id;
          return this.userService.getUserById(data.uid).pipe(
            map((user) => {
              const name = user.name;
              return { id, name, ...data}
            }),
          )
        })
    }),
  )
  .subscribe(finalData => {
    finalData.subscribe(data => console.log(data));
  });

编辑2

下面是我现在拥有的更新代码

this.blogDoc.snapshotChanges().pipe(
      exhaustMap((blogs: any[]) => {
        return zip(blogs.map((blog) => {
          const data = blog.payload.doc.data();
          const id = blog.payload.doc.id;
          console.log(data);
          return this.userService.getUserById(data.uid).pipe(
            map((value) => {
              console.log(value);
              return value;
            })
          )
        })).pipe(first())
      })
    ).subscribe(values => console.log("Values: ", values));

控制台。日志（数据）正确打印数据，但控制台。日志（值）未打印，控制台也未打印。日志（“值：”，值）

当我使用订阅this.userervice.getUserById（data.uid）时，它返回预期的单个用户文档。

我错过了什么？

Answer 1

我尝试了上面的代码，但我在fullQualifiedData中得到的是另一个可观察的，我不能直接在html文件中的*ngFor上使用。

角度文档中也讨论了这一点，但基本上有两种解决方案：

async管道将为您订阅可观察的，然后提供数据。这很容易使用，但是请注意，每个async管道都会创建一个新的订阅，在HTTP请求的情况下，这可能意味着多次触发该请求。所以要小心使用。

js prettyprint-override">@Component({ … })
export class YourComponent {
  public data$ = this.http.getFoo();

  constructor(private http: Http) {}
}

<ng-container *ngIf="data$ | async as data">
    {{ data.foobar }}
</ng-container>

@Component({ … })
export class YourComponent implements OnInit {
  public data: Data;

  constructor(private http: Http) {}

  public ngOnInit() {
    this.http.getFoo().subscribe(data => this.data = data);
  }
}

{{ data?.foobar }}

或者

<ng-container *ngIf="data">
  {{ data.foobar }}
</ng-container>

Answer 2

您可以使用defaustmap将数据传输到第二个http调用，然后在返回时将数据合并在一起。

import { zip } from 'rxjs/observable/zip';

this.http.get('/data1').pipe(
  exhaustMap((data1Arr: any[]) => {
    return zip(...data1Arr.map((data1) => {
      return this.http.get('/data2/' + data1.id).pipe(
        map((data2) => {
          data1.value = data2;
          return data1;
        }),
      );
    }).pipe(first());
  }),
).subscribe((fullQualifiedData) => {
  // do stuff with the data
});