如何从 Angular 中的 Observable 中提取数据答案

【问题标题】：How to extract data from an Observable in Angular如何从 Angular 中的 Observable 中提取数据
【发布时间】：2020-08-26 11:29:20
【问题描述】：

我有一个基于 Angular 的应用程序正在向服务器发出 RESTful 请求，其响应是 JSON 流，表示以下类型的对象列表：

export interface Personal {
  theAddress: string;
  theCity: string;
  theState: String;
  theCountry: string;
  emailAddress: string;
}

我的组件中的代码使用 HttpClient GET 请求来获取要放入 Observable 的数据：

people$: Observable<Personal[]>;

...

ngOnInit() {
    this.people$ = this.http
        .get<Personal[]>("/people/get")
        .map(data => _.values(data))
        .do(console.log);
}

由于各种原因，我想提取 Observable 的内容并将它们放入人员对象数组中。在阅读了 Internet 上的各种文档后，我知道要提取收到的数据，我需要以某种方式在 Observable 上使用订阅方法。不幸的是，我不清楚具体该怎么做。

有人可以帮忙吗？如何将 Observable 接收到的对象提取到数组中？

【问题讨论】：

标签： angular typescript rest

【解决方案1】：

如果您需要数组中的值，则不需要 people$ 成为可观察对象。只需这样做：

import 'rxjs/add/operator/map';

...

people: Personal[];

...

ngOnInit() {
  // Let's get rid of lodash for the mapping thing
  this.http.get<Map<string, Personal>>('/people/get')
    .map(data => Object.keys(data).map(key => data[key]))
    .subscribe((people: Personal[]) => this.people = people);
}

顺便说一句，您似乎在使用过时的 rxjs 库（5.5 之前的版本）。如果你更新它，你将不得不使用管道运算符：

import {map} from 'rxjs/operators';

...
people: Personal[];

...

ngOnInit() {
  // Let's get rid of lodash for the mapping thing
  this.http.get<Map<string, Personal>>('/people/get')
    .pipe(map(data => Object.keys(data).map(key => data[key])))
    .subscribe((people: Personal[]) => this.people = people);
}

作为额外的观察，当您使用 lodash 函数将对象转换为数组时。显然this.http.get<Personal[]> 并没有真正返回Personal 的数组，而是一个对象，因此您可能必须像这样编写get 方法（就像我在上面的代码中所做的那样）：

this.http.get<{[id: string]: Personal}>

或

this.http.get<Map<string, Personal>>

【讨论】：

使用这个答案时出现一个奇怪的错误：编译器说它在 observable 中“找不到地图”。这发生在旧的和更新的 rxjs 库中。我在声明中遗漏了什么吗？
我将在答案中添加一些关于您应该用于 rxjs（当前和旧版本）的导入
额外的导入似乎解决了地图问题。现在它抱怨找不到“”。我仍在学习 Typescript 的优点。 “”是否也需要导入？
只用单引号代替。这里的问题是双引号的表示形式不止一种。如果您从其他地方（例如 Stackoverflow）复制并粘贴代码，可能会出现错误的双引号表示。
OOPS：我没有在代码中使用引号。我在代码中使用的确切语法（使用更新的 rxjs）是： .pipe(map(data => _.values(data))) 编译器抱怨 _。抱歉造成误会...

【解决方案2】：

您需要通过调用 .subscribe 来订阅 observable，并将回调传递给 subscribe。在此回调中，您将通过回调参数从 observable 接收数据，然后您可以将此数据分配给局部变量。看下面的代码

ngOnInit() {
    this.people$ = this.http
        .get<Personal[]>("/people/get")
        .map(data => _.values(data))
        .do(console.log)
        .subscribe(data => this.someArray = data); // ==> see this line
}

从角度 http.get 返回的 observable 是冷可观察的。在您订阅它们之前，它们不会被执行。

【讨论】：