Angular 6 observables - 从 .subscribe() 函数中提取数据并在别处使用

Question

我用可观察的东西把头撞在墙上。我能找到的几乎所有文档都采用较旧的 rxjs 语法。

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

如果我只是 console.log 我的 getData 函数，它会记录订阅而不是我的数据。 I can successfully console.log data within the .subscribe function, but I want to use data outside of .subscribe() .

如何从 data .subscribe() 并在别处使用？或者，我的所有逻辑都必须包含在 .subscribe() 函数中才能使用 data 吗？

 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.
}

原文由 Kyle Vassella 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Sachila Ranawaka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

为此，您需要创建所谓的 Subject （在本例中为 BehaviorSubject ），您可以在 API 调用返回响应时用数据填充它。

然后，为了在别处访问此数据，您可以创建一个“获取”函数以在需要数据时返回 Subject （它本身就是一个 Observable ）。

这是一个例子：

my-data.service.ts

 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();
}

现在在组件中使用它：

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

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

原文由 Tim Klein 发布，翻译遵循 CC BY-SA 4.0 许可协议