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

Question

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

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

我的组件中的代码使用HttpClientGET请求将数据放入Observable:

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

由于各种原因，我想提取Observable的内容，并将它们放入一组人对象中。在阅读了互联网上的各种文档后，我意识到要提取收到的数据，我需要在Observable上使用订阅方法。不幸的是，我不清楚该如何做到这一点。

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

Answer 1

您需要通过在可观察对象上调用.subscribe来订阅它，并向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
}

从角度CCD_ 3返回的可观测到的是冷可观测的。在您订阅它们之前，它们不会被执行。

Answer 2

如果您需要数组中的值，则不需要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>>