关于 javascript:Angular 6 observables – 从 .subscribe() 函数中提取数据并在其他地方使用

Angular 6 observables - extract data from .subscribe() function and use it elsewhere

我正在用 observables 将我的头撞到墙上。我能找到的几乎所有文档都是旧的 rxjs 语法。

我有一个可观察的 API 调用。我在别处调用它并订阅它 - 试图用来自这个 GET 请求的数据填充一个表。

如果我只是 console.log 我的 getData 函数，它会记录订阅而不是我的数据。
我可以在 .subscribe 函数中成功 console.log data，但我想在 .subscribe().

之外使用 data

如何从 .subscribe() 函数中提取 data 并在其他地方使用它？或者，我的所有逻辑是否必须包含在 .subscribe() 函数中才能使用 data?

1
2
3
4
5
6
7
8
9
10
11

getData2() {
return this.m_dbService.get('api/myApiPath').subscribe(
data => (console.log(data)), //This properly logs my data. How to extract `data` out of here and actually use it?
error => { throw error },
() => console.log("finished")
);
}

workbookInit(args){
var datasource = this.getData2(); // this returns the subscription and doesn't work.
}

相关讨论

您可能想要做的是用数据填充另一个 Observable，这样您就可以在项目的其他地方访问它，而无需多次调用 API。

为此，您可以创建一个所谓的 Subject(在本例中为 BehaviorSubject)，然后您可以在 API 调用返回响应时用数据填充它。

然后，为了在别处访问这些数据，您可以创建一个 "get" 函数来在需要数据时返回 Subject(它本身就是一个 Observable)。

这是一个例子：

my-data.service.ts

1
2
3
4
5
6
7
8
9
10
11

myData: BehaviorSubject<number> = new BehaviorSubject<number>(0);

callApi() {
this.dbService.get('apiUrl').subscribe(
(data) = > this.myData.next(data) // Assuming data is a 'number'
);
}

getMyData() {
return this.myData.asObservable();
}

现在在组件中使用它：

1
2
3

this.myService.getMyData().subscribe(
(data) => { /* Use the value from myData observable freely */ }
);

或者您可以依赖 Angular 异步管道(这是处理代码中可观察对象的一种非常方便的方法)。

只需从 getData() 返回 HTTP 请求并在 workbookInit 函数中订阅它。

1
2
3
4
5
6
7
8
9
10
11
12

getData2() {
return this.m_dbService.get('api/myApiPath')
}

workbookInit(args){
this.getData2().subscribe(
data => {
var datasource = data
},
error => { throw error },
() => console.log("finished")
}

您不应该订阅 getData2 中的 Observable。将其原样返回，然后执行以下操作：

1 2	var dataSource; this.getData2().subscribe(res => dataSource = res);

请注意，变量 dataSource 将在请求完成时(异步)设置，因此您不能在同一块范围内立即使用它。

如果您想立即使用它，请将您的代码放入订阅中。

如果你有一个提供数据来填充表格的 observable，最好的方法是不要使用 subscribe()，而是通过使用 async 管道直接在你的 html 模板中使用 observable。您不必担心，您的代码也会更简单。